html5: 幽灵按钮
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <!--
主要知识点：
1.transform 事件发生后需要变的样子
2.transition 主体样式中定义
3.box-sizing
4.border-radius
-->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="box">
<div class="link link-miss">
<span class="icon"></span>
<a href="#" class="button" data-title="My mission is clear">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="link link-play">
<span class="icon"></span>
<a href="#" class="button" data-title="This is my palyground">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button" data-title="Lets do something together">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="tip">
<em></em>
<span></span>
</div>
</div>
<script>
$(function(){
$(".link .button").hover(function(){
var title = $(this).attr("data-title");
$(".tip em").text(title);
var pos= $(this).offset().left;
var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;
var f = pos-dis;
//从top195 -> 160变化
$(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
},function(){
//鼠标移出回到本来的样式
$(".tip").animate({"top":160,"opacity":0},300);
})
})
</script>
</body>
</html>
css:
*{
margin:;
padding:;
}
body{
background: #333;
}
.box{
width: 1000px;
height: 280px;
margin: 50px auto;
}
.box .link{
width: 205px;
height: 280px;
margin: 0 20px;
float: left;
position: relative;
}
/*
Transition
•定义和用法
•transition 属性是一个简写属性，用于设置四个过渡属性：
•transition-property
•transition-duration
•transition-timing-function
•transition-delay
•语法
•transition: property duration timing-function delay;
•值描述
•transition-property规定设置过渡效果的 CSS 属性的名称。
•transition-duration规定完成过渡效果需要多少秒或毫秒。
•transition-timing-function规定速度效果的速度曲线。
•transition-delay定义过渡效果何时开始(延时执行时间)。
•浏览器支持
•Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
•Safari 支持替代的 -webkit-transition 属性。
•注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。*/
/*span属于内敛元素，不具备宽高，使用display属性显示*/
.link .icon{
display: inline-block;
width: 100%;
height: 190px;
transition: 0.2s linear;
-webkit-transition: 0.2s linear;
-o-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
}
.link-miss .icon{
background:url("mission.png") no-repeat center center;
}
.link-play .icon{
background: url("play.png") no-repeat center center;
}
.link-touch .icon{
background: url("touch.png") no-repeat center center;
}
/*Transform
•定义和用法
•transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
•rotate(angle )定义 2D 旋转，在参数中规定角度
•rotateX(angle)定义沿着 X 轴的 3D 旋转。
•rotateY(angle)定义沿着 Y 轴的 3D 旋转。
•rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
•scale(x,y)定义 2D 缩放转换。
•scale3d(x,y,z)定义 3D 缩放转换。
•scaleX(x)通过设置 X 轴的值来定义缩放转换。
•scaleY(y)通过设置 Y 轴的值来定义缩放转换。
•scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
•浏览器支持
•Internet Explorer 10、Firefox、Opera 支持 transform 属性。
•Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
•Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
•Opera 只支持 2D 转换。
*/
/*.link:hover .icon*/
.link .icon:hover{
transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
}
/*
•box-sizing
•定义和用法
•box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
•语法
•box-sizing: content-box|border-box|inherit
•值描述
•content-box
•宽度和高度分别应用到元素的内容框。
•在宽度和高度之外绘制元素的内边距和边框。
•border-box
•为元素设定的宽度和高度决定了元素的边框盒。
•就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
•通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
•inherit 规定应从父元素继承 box-sizing 属性的值。
•浏览器支持
•Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
•Firefox 支持替代的 -moz-box-sizing 属性。*/
.button{
display: block;
width: 180px;
height: 50px;
text-decoration: none;
line-height: 50px;
color:#2DCB70;
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
font-weight: bolder;
border: 2px solid rgba(255,255,255,0.8);
padding-left: 20px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: url("allow.png") no-repeat 130px center;
position: relative;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
-o-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-ms-transition: 0.4s ease;
}
.button:hover{
border: 2px solid rgba(255,255,255,1);
background-position: 140px center;
}
.button .line{
display: block;
position: absolute;
background: none;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
-o-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-ms-transition: 0.4s ease;
}
.button:hover .line{
background: #fff;
}
/*
top:
1.高度不变
2.宽度变（0-盒子的宽度）
3.位置：左-右
*/
.button .line-top{
height: 2px;
width: 0px;
left: -110%;
top: -2px;
}
.button:hover .line-top{
width: 100%;
left: -2px;
}
.button .line-bottom{
width: 0px;
height: 2px;
right: -110%;
bottom: -2px;
}
.button:hover .line-bottom{
width: 100%;
right: -2px;
}
.button .line-left{
width: 2px;
height:;
left: -2px;
bottom: -110%;
}
.button:hover .line-left{
height: 100%;
bottom: -2px;
}
.button .line-right{
width: 2px;
height: 0px;
right: -2px;
top: -110%;
}
.button:hover .line-right{
height: 100%;
top: -2px;
}
.box .tip{
position: absolute;
padding: 0px 14px;
height: 35px;
line-height: 35px;
background: #2DCB70;
color: #fff;
top: 160px;
font-size: 16px;
font-weight: normal;
text-transform: none;
margin: 0 auto;
border-radius: 3px;
opacity:;
}
.tip em{
font-style: normal;
}
/*下三角定义，通过border上，下，左，右显示一部分颜色实现*/
.tip span{
position: absolute;
width:;
height:;
overflow: hidden;
border: 7px solid transparent;
border-top-color: #2DCB70;
left: 50%;
margin-left: -3px;
bottom: -14px;
}
html5: 幽灵按钮的更多相关文章
- 听着好像很牛的特效——幽灵按钮DOM
给大家分享一个听着好像很牛的东西——幽灵按钮,这个玩意对于艺术设计细胞在高中决定不在考试试卷上画画的我来说,实在不感冒.但是这个按钮的设计元素很流行,一个网页东西不做几个,光放上几个按钮就会显得很高端 ...
- 巧用HTML5给按钮背景设计不同的动画
如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation 来动画 background-size 和 background-posit ...
- html5 渐变按钮练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 纯css3实现的幽灵按钮导航
之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览 源码下载 实现代码: htm ...
- 自己动手画一个HTML5的按钮
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- [UWP]浅谈按钮设计
一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...
- Flash生成HTML5动画方法
方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...
随机推荐
- idea Jetty deployment
idea 配置好jetty server后,先执行此操作 mvn install(该操作后才会有war包,jar包之类的),再debug或run之类的操作,不然一直404
- 20145303 《Java程序设计》第六周学习总结
20145303 <Java程序设计>第六周学习总结 教材学习内容总结 第十章:输入/输出 (InputStream与OutputStream) 1.Java将输入/输出抽象化为串流,数据 ...
- RedHat7.4最小化安装没有ifconfig命令
软件环境 VirtualBox 5.2.8 rhel-server-7.4-x86_64-dvd.iso 系统环境 Win10 64 位 8G内存 最小化安装了RedHat7.4之后,进入系统之后使用 ...
- heartbeat 编译安装配置
一.heartbeat介绍 heartbeat是HA高可用集群的一个重要组件,heartbeat实现了资源转移和心跳信息传递.它的常用组合方式为heartbeat v1,heartbeat v2+cr ...
- LeetCode——Maximum Product of Three Numbers
Question Given an integer array, find three numbers whose product is maximum and output the maximum ...
- 数据结构实习 Problem H 迷宫的最短路径
数据结构实习 Problem H 迷宫的最短路径 题目描述 设计一个算法找一条从迷宫入口到出口的最短路径. 输入 迷宫的行和列m n 迷宫的布局 输出 最短路径 样例输入 6 8 0 1 1 1 0 ...
- 回文树 Palindromic Tree
回文树 Palindromic Tree 嗯..回文树是个什么东西呢. 回文树(或者说是回文自动机)每个节点代表一个本质不同的回文串. 首先它类似字典树,每个节点有SIGMA个儿子,表示对应的字母. ...
- 如何将JS里变量的值赋给文本框
举个栗子: <html><HEAD><script type="text/javascript" language="Javascript1 ...
- C#错误的面试题
你面试的时候是不是碰到这样的问题 String s = new String("xyz");创建了几个String Object? ,对于这个问题,我之前也一直以为是对的,这样写是 ...
- hiho 1318 非法二进制数 dp
#1318 : 非法二进制数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 如果一个二进制数包含连续的两个1,我们就称这个二进制数是非法的. 小Hi想知道在所有 n 位 ...