CSS3效果的幽灵按钮
admin 发布于：2016-07-21 09:14:59
阅读：loading
前几天在腾讯课堂看了下幽灵按钮的实现，凭着感觉实现了一下，不知道这种效果是不是传说的幽灵按钮效果，只在Chrome与Firefox兼容较好，Chrome效果最佳，点击这里查看效果。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>幽灵按钮,在Chrome与Firefox下运行</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{ margin: 0; padding: 0; font-size: 12px; } #box{ width: 800px; height: 300px; margin: 100px auto; display: box; display: -webkit-box; display: -ms-box; display: -moz-box; } #box div{ box-flex: 1.0; list-style: none; -moz-box-flex: 1.0; -webkit-box-flex: 1.0; -moz-box-flex: 1.0; position: relative; } #box div p{ position: absolute; bottom: 100px; left: 75px; width: 130px; border-radius: 5px; border: 2px solid green; line-height: 20px; text-align: center; opacity: 0; transition: all 0.5s linear; box-shadow: 5px 5px 5px rgba(0,0,0,.6); } #box div b{ position: absolute; bottom: 98px; left: 130px; border: 5px solid transparent; border-top: 10px solid green; width: 0px; height: 0px; opacity: 0; transition: all 0.5s linear; } #box div a:hover .tip{ opacity: 1; } .image{ display: inline-block; width: 100%; height: 200px; background: url("logo.jpg") no-repeat scroll center center; opacity: 0.3; transition: all 0.5s linear; cursor: pointer; } .image:hover{ opacity: 1; transform: rotate(360deg) scale(0.5); } #box div a{ position: absolute; bottom: 50px; left: 85px; width: 100px; height: 30px; line-height: 30px; border: 2px solid green; border-radius: 5px; padding-left:5px; cursor: pointer; background: url("back.png") no-repeat scroll 90% center; box-shadow: 5px 5px 5px rgba(0,0,0,.2); } .line{ position: absolute; display: inline-block; background-color: green; transition: all 0.5s linear; opacity: 0; } .left{ left: -100px; bottom: 30px; height: 1px; width: 60px; } #box div a:HOVER .left{ left: 0px; opacity: 1; } .top{ left: 0px; bottom: -100px; height: 60px; width: 1px; } #box div a:HOVER .top{ left: -2px; bottom: 0px; height: 10px; opacity: 1; } .bottom{ bottom: -1px; right: -100px; width: 60px; height: 1px; } #box div a:HOVER .bottom{ right: 0px; bottom: -1px; opacity: 1; } .right{ top: -100px; right: -1px; width: 1px; height: 60px; } #box div a:HOVER .right{ top: 2px; right: -1px; height: 10px; opacity: 1; }</style>
<script type="text/javascript">
function show(p , b){ var objP = document.getElementById(p); objP.style.opacity = 1; objP.style.bottom = 100 + "px"; var objB = document.getElementById(b); objB.style.opacity = 1; objB.style.bottom = 98 + "px";}function hide(p , b){ var objP = document.getElementById(p); objP.style.opacity = 0; objP.style.bottom = 80 + "px"; var objB = document.getElementById(b); objB.style.opacity = 0; objB.style.bottom = 80 + "px";
}
</script>
</head>
<body>
<div id="box"> <div> <span class="image"></span> <a onmouseover="show('p1','b1')" onmouseout="hide('p1','b1')"> HTML <label class="line left"></label> <label class="line top"></label> <label class="line bottom"></label> <label class="line right"></label> </a> <p id="p1">This is HTML</p> <b id="b1"></b> </div> <div> <span class="image"></span> <a onmouseover="show('p2','b2')" onmouseout="hide('p2','b2')"> CSS <label class="line left"></label> <label class="line top"></label> <label class="line bottom"></label> <label class="line right"></label> </a> <p id="p2">This is CSS</p> <b id="b2"></b> </div> <div> <span class="image"></span> <a onmouseover="show('p3','b3')" onmouseout="hide('p3','b3')"> JavaScript <label class="line left"></label> <label class="line top"></label> <label class="line bottom"></label> <label class="line right"></label> </a> <p id="p3">This is JavaScript</p> <b id="b3"></b> </div>
</div>
</body>
</html>
点赞
