首页 > 代码库 > 幽灵按钮实例
幽灵按钮实例
幽灵按钮，听名字有点不解？无碍，简单的来说就是一个按钮，移上去背景动一下，然后弹出个提示框，提示框在按钮的正上方而且居中，按钮上方有个图片，移上去有旋转360deg效果。不多说了，还是附上代码吧。由于采用了css3属性，所以，只兼容高级浏览器
主要知识点：
transform
transition
box-sizing
border-radius
html:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>幽灵按钮</title> <link rel="stylesheet" href="http://www.mamicode.com/style.css"></head><body><!-- 主要知识点：transformtransitionbox-sizingborder-radius --><div class="box"> <div class="link link-miss"> <span class="icon"></span> <a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" class="button" data-title="this is my playground"> <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="http://www.mamicode.com/#" class="button" data-title="lets to 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 src="http://www.mamicode.com/js/jquery-1.7.2.js"></script><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; $(‘.tip‘).css({ left:(pos-dis)+‘px‘, opacity:1 }).animate({ top:‘200‘, opacity:1 },300); },function(){ $(‘.tip‘).animate({ top:160, opacity:0 }); },300);});</script></body></html>css:
*{ margin: 0; padding: 0;}body{ background: #333;}.box{ width: 1000px; height: 280px; margin: 50px auto;}.box .link{ width: 205px; height: 280px; margin: 0 20px; float: left; position: relative;}/*span*/.link .icon{ width: 100%; height: 190px; display: inline-block; transition:0.2s linear; -webkit-transition:0.2s linear; -ms-transition:0.2s linear; -o-transition:0.2s linear; -moz-transition:0.2s linear;}.link-miss .icon{ background:url(img/0.jpg) no-repeat center center;}.link-play .icon{ background:url(img/1.jpg) no-repeat center center;}.link-touch .icon{ background:url(img/2.jpg) no-repeat center center;}.link .icon:hover{ tansform: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-tansform:rotate(360deg) scale(1.2);}.button{ position: relative; display: block; width: 180px; height: 50px; text-decoration: none; line-height: 50px; color: #2bcb70; font-family: sans-serif; font-weight: bold; border: 2px solid rgba(255,255,255,0.8); padding-left: 20px; margin: 0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; background: url(img/right.jpg) no-repeat 130px center; transition:0.2s ease; -webkit-transition:0.2s ease; -ms-transition:0.2s ease; -o-transition:0.2s ease; -moz-transition:0.2s 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.2s ease; -webkit-transition:0.2s ease; -ms-transition:0.2s ease; -o-transition:0.2s ease; -moz-transition:0.2s ease;}.button:hover .line{ background: #fff;}/*top 高度不变，宽度在变，位置从左到右*/.button .line-top{ width: 0px; height: 2px; left: -110%; top: -2px;}.button:hover .line-top{ width: 180px; left: -2px;}.button .line-bottom{ width: 0px; height: 2px; right: -110%; bottom: -2px;}.button:hover .line-bottom{ width: 180px; right: -2px;}.button .line-left{ width: 2px; height: 0px; bottom: -110%; left: -2px; }.button:hover .line-left{ width: 2px; height: 50px; bottom: -2px; left: -2px;}.button .line-right{ width: 2px; height: 0px; top: -110%; right: -2px; }.button:hover .line-right{ width: 2px; height: 50px; top: -2px; right: -2px;}.box .tip{ position: absolute; padding: 0 14px; height: 35px; line-height: 35px; background: #2dcb70; top: 160px; font-size: 16px; font-weight: normal; text-transform: none; margin: 0 auto; border-radius: 3px; opacity: 0;}.tip em{ font-style: normal;}.tip span{ position: absolute; width: 0; height: 0; overflow: hidden; border: 7px solid transparent; border-top-color: #2dcb70; left: 50%; margin-left: -3px; bottom:-14px;}
幽灵按钮实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。