幽灵按钮：
完全用CSS3来实现这个效果，主要用的属性有 transition transform box-sizing 等。
大家参考看看，原理很简单。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ghost</title> <link href="reset.css" rel="stylesheet"> <link href="ghost.css" rel="stylesheet"> </head> <body> <div class="box"> <div class="link link-mission"> <span class="icon"></span> <a href="#" class="button"> <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"> <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"> <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> </body> </html>
其中的rest.css是初始化一些样式的，大家可以用自己的重置样式。
ghost.css：
body { background-color: #333; } .box { margin: 50px auto; width: 1000px; height: 280px; } .box .link { display: inline-block; margin: 0 20px; width: 205px; height: 280px; } .box .link .icon { display: inline-block; width: 100%; height: 190px; transition: transform 0.5s; -webkit-transition: transform 0.5s; -moz-transition: transform 0.5s; -o-transition: transform 0.5s; } .box .link .icon:hover { transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); } .link-mission .icon { background: url("mission.png") no-repeat center; } .link-play .icon { background: url("play.png") no-repeat center; } .link-touch .icon { background: url("touch.png") no-repeat center; } .button { display: block; position: relative; margin: 0 auto; padding-left: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.8); width: 180px; height: 50px; font-family: "微软雅黑", Arial, Verdana, sans-serif; font-size: 16px; font-weight: bold; line-height: 50px; background: url("allow.png") no-repeat 120px center; color: #2dcb70; transition: background 0.5s ease; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; } .button:hover { border: 2px solid rgba(255, 255, 255, 1); background: url("allow.png") no-repeat 140px center; box-shadow: 0 0 5px rgb(255, 255, 255); } /*线条共用属性*/ .button .line { position: absolute; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } /*从左飞入的线条*/ .button:hover .line-top { top: -2px; left: -2px; width: 180px; height: 2px; background: #fff; } .button .line-top { top: -2px; left: -100%; width: 0; height: 2px; background: #fff; } /*从右飞入的线条*/ .button:hover .line-bottom { bottom: -2px; right: -2px; width: 180px; height: 2px; background: #fff; } .button .line-bottom { bottom: -2px; right: -100%; width: 0; height: 2px; background: #fff; } /*从下飞入*/ .button:hover .line-left { left: -2px; bottom: -2px; width: 2px; height: 50px; background: #fff; } .button .line-left { left: -2px; bottom: -100%; width: 2px; height: 0; background: #fff; } /*从上飞入的线条*/ .button:hover .line-right { right: -2px; top: -2px; width: 2px; height: 50px; background: #fff; } .button .line-right { right: -2px; top: -100%; width: 2px; height: 0; background: #fff; }
其中有四个素材图片，大家可以用自己的做一下尝试。