发射小鸟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> /*CSS源代码*/ html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a{ text-decoration:none; } a:link{color:green;} a:visited{color:green;} a:hover{color:green;} .svg-path { position: fixed; width: 100%; height: 100%; z-index: 0; } .cloud { position: absolute; z-index: 90; display: none; left: 120%; } .title { width: 100%; position: absolute; top: 70%; z-index: 1; font-family: Arial; text-align: center; font-size: 45px; color: #00ADE6; } .title span { display: inline-block; position: absolute; top: -20px; left: 0; width: 100%; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .title span:nth-child(2) { opacity: 0; transform: translate3d(0, 80%, 0); } .title.pressed span:nth-child(1) { opacity: 0; transform: translate3d(0, -80%, 0); } h1.pressed span:nth-child(2) { opacity: 1; transform: translate3d(0, 0, 0); } #box { cursor: pointer; } /* TWITTER BIRD ANIMATION */ .animation { background-image: url(http://twin-dev.net/experiments/codevember/maki/ressources/twitter-transparent.png); height: 110px; /* width and height of each frame */ width: 150px; position: absolute; z-index: 100; left: 50%; top: 10%; transform: translate(-50%, -10%); } .animationBird { -webkit-animation: sprite-animation .6s steps(12,end) 8.5; /* steps = number of frames */ animation: sprite-animation .6s steps(12,end) 8.5; } @-webkit-keyframes sprite-animation { /* Safari & Chrome */ from { background-position: 0 0; } to { background-position: -1800px 0; } /* negative of sprite sheet width */ } @keyframes sprite-animation { from { background-position: 0 0; } to { background-position: -1800px 0; } /* negative of sprite sheet width */ } /* CLOUD ANIMATION */ .animationCloud { -webkit-animation: cloud-animation 5s linear; animation: cloud-animation 5s linear; } @-webkit-keyframes cloud-animation { /* Safari & Chrome */ 0% { left: 120%; } 100% { left: -25%; } } @keyframes cloud-animation { 0% { left: 120%; } 100% { left: -25%; } } .Signature { position: absolute; z-index: 100; bottom: 20px; right: 20px; color: #00ADE6; line-height: .2; font-size: .7em; font-family: Open Sans, sans-serif; } </style> </head> <body> <!-- HTML代码片段中请勿添加<body>标签 //--> <div class="animation"></div> <img src="http://twin-dev.net/experiments/codevember/maki/ressources/white-cloud.png" class="cloud"> <h1 id="title" class="title"><span>press</span><span>release</span></h1> <svg viewbox="0 0 100 200" id="svg" preserveAspectRatio="none" class="svg-path"> <path id="box" d="M0,0 H100 V100 Q50,200 0,100" fill="#00ADE6"> </svg> <aside class="Signature"> <p><a href="http://www.gbtags.com">极客标签gbtags.com</a></p> </aside> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/0.0.7/dynamics.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> <script> /*Javascript代码片段*/ $( document ).ready(function() { var path = document.getElementById('box'); var title = document.getElementById('title'); var spring = .9; var friction = .8; var easing = .1; var sy = 200; var dy = 100; var vy = 0; var released = true; requestAnimationFrame(function update(){ requestAnimationFrame(update); if (released) { vy += (dy - sy) * spring; sy += (vy *= friction); } else { sy += (dy - sy) * easing; } path.setAttribute('d', 'M0,0 H100 V100 Q50,' + sy + ' 0,100'); }); var clicking = false; document.addEventListener('mousedown', function(){ released = false; dy = 200; $(".animation").animate({ top: "40%" }, 200); title.classList.add('pressed'); }); document.addEventListener('mouseup', function(){ $(".animation").animate({ top: "10%" }); $(".animation").addClass("animationBird"); $(".cloud").show().addClass("animationCloud"); setTimeout(releaseHeader, 600); title.classList.remove('pressed'); }); function releaseHeader() { released = true; dy = 100; setTimeout(removeClass, 4500); } function removeClass() { $(".animation").removeClass("animationBird"); $(".cloud").removeClass("animationCloud"); } }); </script> </body> </html>
.