liusure0 2018-02-20
按钮开门效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { height: 100%; padding: 0 24px; margin: 0; color: #515151; background-color: #FFF9F2; overflow: hidden; } main { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 63px auto; -webkit-transition: -webkit-transform 0.8s 0.61s ease-out; transition: -webkit-transform 0.8s 0.61s ease-out; transition: transform 0.8s 0.61s ease-out; transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out; } .hexagon { position: relative; width: 80px; height: 46.19px; margin: auto; background-color: #00B4FF; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 2; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 23.09px solid #00B4FF; } .hexagon:after { top: 100%; width: 0; border-top: 23.09px solid #00B4FF; } .circle { position: absolute; bottom: -12px; right: -12px; margin: auto; width: 24px; height: 24px; background-color: #515151; border-radius: 100%; z-index: 3; box-shadow: #FFF9F2 0 0 0 4px; } h1 { opacity: 0; position: relative; font-family: "Fredoka One", sans-serif; font-size: 36px; text-align: center; margin: 30px 0 60px; -webkit-transform: translateY(24px); transform: translateY(24px); -webkit-transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out; transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out; transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out; transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out; z-index: 1; } h1 span { color: #00B4FF; } .open h1 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out; transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out; transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out; transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out; } .panel { position: fixed; width: 50%; height: 100%; background-color: #00B4FF; z-index: 6; visibility: visible; -webkit-transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out; transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; } .panel.left { left: 0; } .panel.left:before { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; content: ''; border-right: 40px solid #FFF9F2; border-top: 23px solid transparent; border-bottom: 23px solid transparent; height: 46px; width: 0; } .panel.right { right: 0; } .panel.right:before { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; content: ''; border-left: 40px solid #FFF9F2; border-top: 23px solid transparent; border-bottom: 23px solid transparent; height: 46px; width: 0; } .panel.right:after { content: ''; position: absolute; top: 0; bottom: -46px; left: 28px; margin: auto; width: 24px; height: 24px; background-color: #FFF9F2; border-radius: 100%; z-index: 3; box-shadow: #00B4FF 0 0 0 4px; } .open .panel { opacity: 0.2; -webkit-transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out; transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out; } .open .panel.left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .open .panel.right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } button { cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 80px; height: 80px; color: white; background-color: transparent; padding: 0 24px; font-size: 18px; border: 0; z-index: 6; border-radius: 100%; -webkit-tap-highlight-color: transparent; } button:focus { outline: none; } </style> </head> <body class=""><!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> </div> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <main> <div class="hexagon"> <div class="circle"></div> </div> <h1>开门<span>效果</span></h1> </main> <div class="panel left"></div> <div class="panel right"></div> <button></button> <script type="text/javascript"> $('button').on('click', function () { $('body').toggleClass('open'); });</script> </body> </html>
.
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->