CSS3华丽按钮效果
图片部分用到：transform:rotate(XXXdeg) scale(XXX); 变换：旋转 和 放大
方块按钮用到：定义四个span标签，分别代表了四条边，属性设为position:absolute;分别以不同方向划入,这里我是把它的width从0-到100%。
这里用到了transition属性，划入时候让他有过度效果。
tip方面：主要是怎么做三角形，其次是js动态更改tip left的位置。
这个练习算是综合考察了 css3的运用效果，大家可以自己尝试着做一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>btnEffect</title> </head> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var oBtn=$('.btn'); var oTip=$('.tip'); oBtn.hover(function(){ var _this=$(this); var oT=140; var opac=1; AnimateFn(_this,opac,oT); },function(){ var _this=$(this); var oT=100; var opac=0; AnimateFn(_this,opac,oT); }) function AnimateFn(obj,opc,otop){ var oA=obj.find('a'); var oMsg=oA.attr('data-title');//msg var index=obj.index(); var posLeft=parseInt(obj.position().left); oTip.find('em').text(oMsg); var selfWidth=obj.outerWidth(); var oL=posLeft+parseInt(selfWidth/2)-parseInt(oTip.outerWidth()/2); var oT=otop; oTip.css('left',oL); oTip.stop().animate({ 'top':oT, 'opacity':opc }) } }); </script> <style type="text/css"> *{margin:0px;padding:0px;} body{background:#333;font-family:Arial;font-size:12px;} .box{width:690px;height:280px;margin:50px auto;position: relative;} .box .btn{width:200px;float:left;margin-right:30px;} /*图标*/ .icon{width:100%;height:200px;display:block;background-repeat: no-repeat;background-position: center center; transition:all 0.3s ease-out 0s; -webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; } .link-misson .icon{ background-image:url(images/mission.png); } .link-play .icon{ background-image:url(images/play.png); } .link-touch .icon{ background-image:url(images/touch.png); } .btn:hover .icon{ -webkit-transform:rotate(360deg) scale(1.2); -moz-transform:rotate(360deg) scale(1.2); -ms-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); transform:rotate(360deg) scale(1.2); } /*按钮链接*/ .link{ width:100%; height:50px; line-height:50px; display: block; color:#fff; border:2px solid rgba(255,255,255,0.8); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; padding-left:20px; text-decoration: none; color:#2DCB70; font-size:1.5em; background-image:url(images/allow_right.png); background-repeat: no-repeat; background-position:143px center; transition:all 0.3s ease-out 0s; -webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; position:relative; } .btn:hover .link{background-position:153px center;border:2px solid rgba(255,255,255,1);} .btn .link .arrow{ display:block; background:rgba(45,203,112,0); transition:all 0.3s ease-out 0s; -webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; } .btn:hover .link .arrow{ background:rgba(45,203,112,1); } .btn .link .arrow-top{ height:2px; width:0; position: absolute; left:-160%; top:-2px; } .btn:hover .link .arrow-top{ left:-2px; width:102%; } .btn .link .arrow-right{ height:0; width:2px; position: absolute; right:-2px; top:200%; } .btn:hover .link .arrow-right{ height:107%; top:-2px; } .btn .link .arrow-bottom{ width:0; height:2px; position: absolute; left:160%; bottom:-2px; } .btn:hover .link .arrow-bottom{ width:102%; left:-2px; } .btn .link .arrow-left{ width:2px; height:0; position: absolute; left:-2px; top:-200%; } .btn:hover .link .arrow-left{ top:-2px; height:107%; } /*提示框*/ .box .tip{padding:10px;background:#2DCB70;position:absolute;left:0px;top:120px;border-radius:5px; opacity:0; filter:alpha(opacity:0); } .box .tip em{ font-style: normal; font-size:1.4em; color:#fff; } .box .tip span{ display:block; width:0; height:0; overflow:hidden; border:7px solid transparent; border-top-color:#2DCB70; position:absolute; bottom:-14px; left:50%; z-index:8; margin-left:-5px; } </style> <body> <div class="box"> <div class="btn link-misson"> <span class="icon"></span> <a href="#" class="link" data-title="The misson is clear"> <span class="arrow arrow-top"></span> <span class="arrow arrow-right"></span> <span class="arrow arrow-bottom"></span> <span class="arrow arrow-left"></span> Misson </a> </div> <div class="btn link-play"> <span class="icon"></span> <a href="#" class="link" data-title="This is my playground"> <span class="arrow arrow-top"></span> <span class="arrow arrow-right"></span> <span class="arrow arrow-bottom"></span> <span class="arrow arrow-left"></span> Play </a> </div> <div class="btn link-touch"> <span class="icon"></span> <a href="#" class="link" data-title="The is my touch"> <span class="arrow arrow-top"></span> <span class="arrow arrow-right"></span> <span class="arrow arrow-bottom"></span> <span class="arrow arrow-left"></span> Touch </a> </div> <div class="tip"><em></em><span></span></div> </div> </body> </html>
