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 ...
随机推荐
- js小工具---本地图片转换为base64编码数据
今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...
- linux性能分析命令1：top命令
转载:http://www.cnblogs.com/peida/archive/2012/12/24/2831353.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的 ...
- 20145324 《Java程序设计》第3周学习总结
20145324 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 1.要产生对象必须先定义类,类是对象的设计图,对象是类的实例,建立实例要用new 2.参数名称与对象数据成员 ...
- 20145328 《Java程序设计》第7周学习总结
20145328 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 12.1 认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Lambda去重 ...
- Css初步认识
css 美化页面 cascading style sheet 层叠样式表 css语法: 选择器{ css属性名:属性值;css属性名:属性值;} css引入方式: 方式一:内联样式表 通过标签 ...
- intellij idea rearrange code
reformat code的时候,无法将filed放在method前边,很恶心. 那么先去
- [Pytorch]PyTorch Dataloader自定义数据读取
整理一下看到的自定义数据读取的方法,较好的有一下三篇文章, 其实自定义的方法就是把现有数据集的train和test分别用 含有图像路径与label的list返回就好了,所以需要根据数据集随机应变. 所 ...
- 修改主机hosts文件 访问外网
参考:详解google Chrome浏览器(理论篇) 感谢原博主 Alan_beijing 的分享,博客:Alan_beijing hosts文件所在位置: a.Windows系统: C:\Windo ...
- JSch 实现 SSH 端口转发
package com.yinger.webservice.test; import java.sql.Connection; import java.sql.DriverManager; impor ...
- 深入浅出-Binding的源与路径
1.把控件作为Binding源与Binding标记扩展<TextBox x:Name="textBox1" Text="{Binding Path=Value, E ...