CSS3--幽灵按钮特效(实例)
2015-03-04 12:03
405 查看
先预览效果
其中用到了CSS3的Transition属性:设置动画时间、效果;Transform属性:设置元素旋转、位移;box-sizing属性:以特定的方式定义某个区域的特定元素;
制作小三角方法:
HTML代码
CSS代码
JQuery代码
学自慕课网http://www.imooc.com/learn/5
其中用到了CSS3的Transition属性:设置动画时间、效果;Transform属性:设置元素旋转、位移;box-sizing属性:以特定的方式定义某个区域的特定元素;
制作小三角方法:
1 width:0; height:0; overflow:hidden; 2 border:7px solid transparent; 3 border-top-color:#2dcb70; /*宽高都为零,先设置边框为透明,再在需要的地方给边框单独设置颜色即可*/
HTML代码
<div class="box"> <div class="link link-miss"> <span class="icon"></span> <a href="#" class="button" data="My mission is clear"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> MISSION </a> </div> <div class="link link-play"> <span class="icon"></span> <a href="#" class="button" data="This is my playGroup"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> PLAY </a> </div> <div class="link link-touch"> <span class="icon"></span> <a href="#" class="button" data="This is my Touch"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> TOUCH </a> </div> <div class="tip"> <em></em><span></span> </div> </div>
CSS代码
*{margin:0; padding:0;} body{background:#333;} .box { width:800px; height:280px; margin: 50px auto; } .box .link { width:205px; height:280px; float: left; margin:0 20px; } .link .icon { display:inline-block; width:100%; height:190px; cursor:pointer; transition:ease-out 0.2s; } .link-miss .icon { background:url(../images/mission.png) no-repeat center; } .link-play .icon { background:url(../images/play.png) no-repeat center; } .link-touch .icon { background:url(../images/touch.png) no-repeat center; } .link .icon:hover { transform:rotate(360deg) scale(1.2); } .button { display:block; width:180px; height:50px; line-height: 50px; text-decoration: none; color:#2dcb70; font-family: Arial; font-weight: bolder; border:2px solid rgba(255,255,255,0.6); padding-left: 20px; margin:0 auto; background: url(../images/allow.png) no-repeat 130px center; box-sizing:border-box; transition:0.4s ease; position: relative; } .button:hover { border:2px solid rgba(255,255,255,1); background-position: 140px center; } /* CSS3--Transition 语法:transition:property duration timing-function delay; 描述: transition-property:规定设置过渡效果的CSS属性的名称; transition-duration:规定完成过渡效果需要多少秒或毫秒; transition-timing-function:规定速度效果的速度曲线; transition-delay:定义过渡效果何时开始; CSS3--Transform transform属性向元素应用2D或3D转换;该属性允许我们对元素进行旋转/缩放/移动或倾斜; CSS3--box-sizing box-sizing属性允许以特定的方式定义匹配某个区域的特定元素; 语法:box-sizing:content-box | border-box | inherit; 描述: content-box:(默认值)宽度和高度分别应用到元素的内容框,在宽度和高度的基础上绘制元素的内边距和边框; border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制; 通过已设定的宽度和高度分别减去边框和内边距才能得到内容的实际宽度和高度; */ .button .line { position: absolute; background: none; transition:0.4s; } .button:hover .line { background: #f00; } .button .line-top { width:0px; height:2px; top:-2px; left:-110%; } .button:hover .line-top { width:180px; left:-2px; } .button .line-right { width:2px; height:0px; right:-2px; top:-110%; } .button:hover .line-right { height:50px; top:-2px; } .button .line-bottom { width:0px; height:2px; bottom:-2px; right:-110%; } .button:hover .line-bottom { width:180px; right:-2px; } .button .line-left { width:2px; height:0px; left:-2px; bottom:-110%; } .button:hover .line-left { height:50px; bottom:-2px; } .tip { position: absolute; padding: 0 14px; height:35px; line-height: 35px; background: #2dcb70; color:#fff; font-size: 18px; margin: 0 auto; border-radius: 3px; top:160px; opacity:0; } .tip em { font-style: normal; font-size: 18px; color:#fff; } .tip span { display: block; width:0; height:0; overflow: hidden; position: absolute; top:35px; left:50%; border:7px solid transparent; border-top-color:#2dcb70; margin-left: -3px; }
JQuery代码
$(function(){ $('.link .button').hover(function(){ var title = $(this).attr('data'); $('.tip em').text(title); var pos = $(this).offset().left; var dis = parseInt($('.tip').outerWidth()-$(this).outerWidth())/2; var l = pos - dis; $('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300); },function(){ if(!$('.tip').is(':animated')){ $('.tip').animate({'top':160,'opacity':0},50); } }) });
学自慕课网http://www.imooc.com/learn/5
相关文章推荐
- 幽灵按钮-按钮特效
- css3按钮特效
- 有金属质感 有凹槽阴影的CSS3text-shadow 悬停按钮特效
- h5按钮css3动态特效,让页面静不下来
- 菜单导航 纯CSS3液态胶合效果的环形菜单按钮特效
- CSS3下实现幽灵按钮
- 五款漂亮的纯CSS3动画按钮的实例教程
- css3 翻转特效实例 翻扑克
- 6种非常炫酷的CSS3按钮边框动画特效
- CSS3和js炫酷点击按钮3D翻转动画特效
- CSS3鼠标滑动动画按钮特效
- 20150810 CSS3实现照片墙+图片阴影+按钮特效
- 7款外观迷人的HTML5/CSS3 3D按钮特效
- [HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
- CSS3和js炫酷点击按钮3D翻转动画特效
- 一款基于css3的列表toggle特效实例教程
- css实例教程 一款纯css3实现的超炫动画背画特效
- html5 css3 动态气泡按钮实例演示
- 纯css3开关按钮动画特效插件