<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Kitten Sniffer</title> <!-- https://codepen.io/teolitto/pen/cdxFm --> <style type="text/css"> * { margin: 0; padding: 0; outline: 0; border: 0; } html, body, .wrapper { display: block; width: 100%; height: 100%; background: #fff; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); overflow: hidden; } .sq { display: block; width: 920px; height: 920px; background: rgba(0,0,0,0.25); position: absolute; top: 0; left: 0; translate } .sq0 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/csZBTWg.png') center no-repeat; z-index: 99; } .sq1 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Nx1ynN8.png') center no-repeat; z-index: 98; } .sq2 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/mjxuojh.png') center no-repeat; z-index: 97; } .sq3 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Lco4D68.png') center no-repeat; z-index: 96; } .sq4 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/6ECfCYU.png') center no-repeat; z-index: 95; } .sq5 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/69f1r1R.png') center no-repeat; z-index: 94; } .sq6 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/T2aLa4j.png') center no-repeat; z-index: 93; } .sq7 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/ZFeqswq.png') center no-repeat; z-index: 92; } .sq8 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/pROjk3i.png') center no-repeat; z-index: 91; } .sq9 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/CHTO2AD.png') center no-repeat; z-index: 90; } .sq10 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/YWXzrsV.png') center no-repeat; z-index: 89; } .sq11 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/whx7JDJ.png') center no-repeat; z-index: 88; } .sq12 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/I4Y5DMd.png') center no-repeat; z-index: 87; } .sq13 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/4oN40ZA.png') center no-repeat; z-index: 86; } .sq14 { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/w6U9R8c.png') center no-repeat; z-index: 85; } </style> </head> <body> <div class="wrapper"> <div class="sq sq0"></div> <div class="sq sq1"></div> <div class="sq sq2"></div> <div class="sq sq3"></div> <div class="sq sq4"></div> <div class="sq sq5"></div> <div class="sq sq6"></div> <div class="sq sq7"></div> <div class="sq sq9"></div> <div class="sq sq10"></div> <div class="sq sq11"></div> <div class="sq sq12"></div> <div class="sq sq13"></div> <div class="sq sq14"></div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> <script type="text/javascript"> var sqs = document.getElementsByClassName('sq'); var body = document.getElementsByTagName('body')[0]; var mousePos = {x: window.innerWidth/2, y: window.innerHeight/2}; var delay = 0.5; body.addEventListener('mousemove', function(e){ mousePos.x = e.clientX; mousePos.y = e.clientY; },false); body.addEventListener('touchstart', function(e){ mousePos.x = e.touches[0].clientX; mousePos.y = e.touches[0].clientY; }) body.addEventListener('touchmove', function(e){ mousePos.x = e.touches[0].clientX; mousePos.y = e.touches[0].clientY; }) function render() { //console.log('render. mousePos.x=',mousePos.x) for (var i = 0; i < sqs.length; i++) { var elLeft = parseFloat(sqs[i].style.left||0); var elTop = parseFloat(sqs[i].style.top||0); var leftDist = elLeft + 460 - mousePos.x; var topDist = elTop + 460 - mousePos.y; // console.log("leftDist: ", leftDist, 'mousePos.x',mousePos.x) sqs[i].style.left = elLeft - (leftDist / ( 1 + i*delay)) + "px"; sqs[i].style.top = elTop - (topDist / (1+ i*delay)) + "px"; } window.requestAnimationFrame(render); } window.requestAnimationFrame(render) //polyfills // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel // MIT license (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); </script> </html> 提示:你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS: Cat Swinging on String</title> <!-- https://codepen.io/davidkpiano/pen/Xempjq --> <style type="text/css"> .all-wrap { -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } .all { top: 10rem; left: calc(50% - 2.5rem); position: absolute; width: 5rem; height: 5rem; -webkit-transform-origin: center -20rem; transform-origin: center -20rem; -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } .all:before { height: 20rem; width: 2px; background-color: #DB242A; left: calc(50% - 1px); bottom: 20rem; } .yarn { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50%; background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22); background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22); z-index: 1; } .yarn:before, .yarn:after { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: white; top: -1px; } .yarn:before { left: calc(50% + 7px); background-color: #b1bce6; } .yarn:after { right: calc(50% + 7px); background-color: #D5E8F8; } .cat-wrap { position: absolute; top: 0; left: calc(50% - 45px); width: 90px; height: 130px; -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: swing 7s 0.2s infinite both; animation: swing 7s 0.2s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-upper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: top center; transform-origin: top center; z-index: 1; } .cat-upper .cat-leg { position: absolute; width: 20px; height: 100%; background-color: white; z-index: -1; background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9); background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9); } .cat-upper .cat-leg:nth-child(1) { border-top-left-radius: 100px; left: 10px; } .cat-upper .cat-leg:nth-child(1):after { left: 50%; } .cat-upper .cat-leg:nth-child(2) { border-top-left-radius: 0; border-top-right-radius: 100px; right: 10px; } .cat-upper .cat-leg:nth-child(2):after { right: 50%; } .cat-lower-wrap { height: 90%; width: 100%; position: absolute; top: 100%; width: 75px; left: calc(50% - 37.5px); -webkit-animation: reverse-swing 7s 0.2s infinite both; animation: reverse-swing 7s 0.2s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-lower { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: swing 7s 0.5s infinite both; animation: swing 7s 0.5s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-lower:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); z-index: 1; } .cat-lower .cat-leg, .cat-lower .cat-paw { z-index: -1; position: absolute; height: 20px; width: 20px; -webkit-animation: swing-leg 7s 0.3s infinite both; animation: swing-leg 7s 0.3s infinite both; z-index: 1; -webkit-transform-origin: top center; transform-origin: top center; border-top-left-radius: 20px; border-top-right-radius: 20px; background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); } .cat-lower > .cat-leg { bottom: 20px; } .cat-lower > .cat-leg .cat-leg { top: 25%; } .cat-lower > .cat-leg + .cat-leg { right: 0; } .cat-lower .cat-paw { top: 50%; border-radius: 50%; background-color: #fff; } .cat-lower .cat-tail { position: absolute; height: 15px; width: 10px; -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-origin: top center; transform-origin: top center; z-index: 0; background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .cat-lower .cat-tail > .cat-tail { top: 50%; } .cat-lower > .cat-tail { left: calc(50% - 5px); top: 95%; } .cat-head { width: 90px; height: 90px; background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); border-radius: 50%; top: calc(100% - 45px); } .cat-face { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 100px; perspective: 100px; } .cat-ears { position: absolute; top: 0; left: 0; height: 50%; width: 100%; z-index: -1; } .cat-ear { width: 20px; height: 100%; position: absolute; border-radius: 5px; top: -10px; } .cat-ear:first-child { left: 0; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: skewY(40deg); transform: skewY(40deg); background-color: white; } .cat-ear:first-child:before { left: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background-color: #D7EBFB; } .cat-ear:last-child { right: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: skewY(-40deg); transform: skewY(-40deg); background-color: #d1e6f7; } .cat-ear:last-child:before { right: 0; border-top-left-radius: 50%; border-bottom-left-radius: 50%; background-color: #e0f0fc; } .cat-ear:before { width: 60%; height: 100%; top: 10px; position: absolute; background-color: #fff; } .cat-eyes { position: absolute; top: 50%; width: 100%; height: 6px; -webkit-animation: blink 7s step-end infinite both; animation: blink 7s step-end infinite both; } .cat-eyes:before, .cat-eyes:after { position: absolute; height: 6px; width: 6px; border-radius: 50%; background-color: #4B4D75; } .cat-eyes:before { left: 20px; } .cat-eyes:after { right: 20px; } .cat-mouth { position: absolute; width: 12px; height: 8px; background-color: #4B4D75; top: 60%; left: calc(50% - 6px); border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%; border-bottom-left-radius: 50% 70%; border-bottom-right-radius: 50% 70%; -webkit-transform: translateZ(10px); transform: translateZ(10px); } .cat-mouth:before, .cat-mouth:after { position: absolute; width: 90%; height: 100%; border: 2px solid #9FA2CB; top: 80%; border-radius: 100px; border-top-color: transparent; z-index: -1; } .cat-mouth:before { border-left-color: transparent; right: calc(50% - 1px); -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .cat-mouth:after { border-right-color: transparent; left: calc(50% - 1px); -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .cat-whiskers { width: 50%; height: 8px; position: absolute; bottom: 25%; left: 25%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 60px; perspective: 60px; } .cat-whiskers:before, .cat-whiskers:after { position: absolute; height: 100%; width: 30%; border: 2px solid #9FA2CB; border-left: none; border-right: none; } .cat-whiskers:before { right: 100%; -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotateY(70deg) rotateZ(-10deg); transform: rotateY(70deg) rotateZ(-10deg); } .cat-whiskers:after { left: 100%; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotateY(-70deg) rotateZ(10deg); transform: rotateY(-70deg) rotateZ(10deg); } @-webkit-keyframes bob { 0% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 6.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 12.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 18.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 25% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 31.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 37.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 43.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 50% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 56.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 62.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 68.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 75% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 81.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 87.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 93.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 100% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } } @keyframes bob { 0% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 6.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 12.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 18.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 25% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 31.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 37.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 43.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 50% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 56.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 62.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 68.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 75% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 81.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 87.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 93.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 100% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @-webkit-keyframes swing-leg { 0% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 12.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 25% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 37.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 50% { -webkit-transform: rotate(2.3deg); transform: rotate(2.3deg); } 62.5% { -webkit-transform: rotate(-2.3deg); transform: rotate(-2.3deg); } 75% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } 87.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } } @keyframes swing-leg { 0% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 12.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 25% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 37.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 50% { -webkit-transform: rotate(2.3deg); transform: rotate(2.3deg); } 62.5% { -webkit-transform: rotate(-2.3deg); transform: rotate(-2.3deg); } 75% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } 87.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } } @-webkit-keyframes swing-tail { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 12.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 25% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 37.5% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 50% { -webkit-transform: rotate(-9.2deg); transform: rotate(-9.2deg); } 62.5% { -webkit-transform: rotate(9.2deg); transform: rotate(9.2deg); } 75% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 87.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } } @keyframes swing-tail { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 12.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 25% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 37.5% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 50% { -webkit-transform: rotate(-9.2deg); transform: rotate(-9.2deg); } 62.5% { -webkit-transform: rotate(9.2deg); transform: rotate(9.2deg); } 75% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 87.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } } @-webkit-keyframes reverse-swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 12.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 37.5% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 50% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 62.5% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 75% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 87.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes reverse-swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 12.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 37.5% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 50% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 62.5% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 75% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 87.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes face { 0% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 12.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 25% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 37.5% { -webkit-transform: translateX(7.5px); transform: translateX(7.5px); } 50% { -webkit-transform: translateX(-11.5px); transform: translateX(-11.5px); } 62.5% { -webkit-transform: translateX(11.5px); transform: translateX(11.5px); } 75% { -webkit-transform: translateX(-7.5px); transform: translateX(-7.5px); } 87.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 100% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } } @keyframes face { 0% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 12.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 25% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 37.5% { -webkit-transform: translateX(7.5px); transform: translateX(7.5px); } 50% { -webkit-transform: translateX(-11.5px); transform: translateX(-11.5px); } 62.5% { -webkit-transform: translateX(11.5px); transform: translateX(11.5px); } 75% { -webkit-transform: translateX(-7.5px); transform: translateX(-7.5px); } 87.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 100% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes blink { from, to, 10%, 25%, 80% { -webkit-transform: scaleY(1); transform: scaleY(1); } 8%, 23%, 78% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } } @keyframes blink { from, to, 10%, 25%, 80% { -webkit-transform: scaleY(1); transform: scaleY(1); } 8%, 23%, 78% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } } body, html { height: 100%; width: 100%; margin: 0; padding: 0; background-color: #1F1F3C; overflow: hidden; } *, *:before, *:after { box-sizing: border-box; position: relative; -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } *:before, *:after { content: ''; display: block; } </style> </head> <body> <div class="all-wrap"> <div class="all"> <div class="yarn"></div> <div class="cat-wrap"> <div class="cat"> <div class="cat-upper"> <div class="cat-leg"></div> <div class="cat-leg"></div> <div class="cat-head"> <div class="cat-ears"> <div class="cat-ear"></div> <div class="cat-ear"></div> </div> <div class="cat-face"> <div class="cat-eyes"></div> <div class="cat-mouth"></div> <div class="cat-whiskers"></div> </div> </div> </div> <div class="cat-lower-wrap"> <div class="cat-lower"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-paw"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-leg"> <div class="cat-paw"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail"> <div class="cat-tail -end"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示:你可以先修改部分代码再运行。 转载请注明:有爱前端 » 少年撸猫吗 喜欢 (0)or分享 (0)