jQuery+css3实现极富创意的飞蛾追逐动画404页面效果源码.zip资源-CSDN文库

共5个文件

png：3个

html：1个

js：1个

版权申诉

jQuery

89 浏览量 2022-11-06 23:44:30 上传评论收藏 115KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery+css3实现极富创意的飞蛾追逐动画404页面效果源码.zip （5个子文件）

132686969980972139

images

r-wing-b.png 5KB

l-wing-b.png 5KB

fallback.png 70KB

index.html 4KB

jquery-1.11.1.min.js 94KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>创意飞蛾404页面</title> <style> html, body { height: 100%; background: url('images/fallback.png') repeat scroll; } .not { text-align: center; writing-mode: tb-rl; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); white-space: nowrap; display: block; margin-left: -13px; font-weight: normal; text-decoration: blink; color: #fff; text-shadow: 0 0 5px #f1c40f, 0 0 10px #f1c40f, 0 0 15px #f1c40f, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; } .moth { width: 148px; /*148*/ height: 83px; position: absolute; top: 50%; left: 50%; margin-left: -74px; /*74*/ margin-top: -41.5px; display: inline-block; padding: 0; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; -webkit-transition: top 1s linear, left 1s linear; -moz-transform-style: preserve-3d; -moz-transform-origin: 50% 50%; -moz-transition: top 1s linear, left 1s linear; transform-style: preserve-3d; transform-origin: 50% 50%; transition: top 1s linear, left 1s linear; } .wing { width: 72px; height: 83px; margin-left: -4px; padding: 0; display: inline-block; -webkit-animation: wing-animation 0.5s linear infinite; -moz-animation: wing-animation 0.5s linear infinite; animation: wing-animation 0.5s linear infinite; } .wing.left { background: url("images/l-wing-b.png") no-repeat center center; -webkit-transform-origin: right center; -moz-transform-origin: right center; transform-origin: right center; } .wing.right { background: url("images/r-wing-b.png") no-repeat center center; -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes nabpi-animation { from { -webkit-transform: translateZ(0); } 50% { -webkit-transform: translateZ(100); } to { -webkit-transform: translateZ(0); } } @-webkit-keyframes wing-animation { from { -webkit-transform: rotateY(0deg); } 60% { -webkit-transform: rotateY(80deg); } to { -webkit-transform: rotateY(0deg); } } @-moz-keyframes wing-animation { from { -moz-transform: rotateY(0deg); } 60% { -moz-transform: rotateY(80deg); } to { -moz-transform: rotateY(0deg); } } @keyframes wing-animation { from { transform: rotateY(0deg); } 60% { transform: rotateY(80deg); } to { transform: rotateY(0deg); } } </style> </head> <body> <script src="js/jquery-1.11.1.min.js"></script> <div id="moth" class="moth"> <div class="not">404</div> <div class="left wing"></div> <div class="right wing"></div> </div> <script> $(document).ready(function() { var $moth = $('#moth'); $(document).on('mousemove', function(e) { var mouseX = e.clientX, mouseY = e.clientY; mothP = $moth.position(), mothX = mothP.left, mothY = mothP.top, $moth.css('left', mouseX + 'px'); $moth.css('top', mouseY + 'px'); var vx = mouseX - mothX, vy = mouseY - mothY, r = Math.sqrt(vx * vx + vy * vy), cos = vx / r, angle = Math.acos(cos) * 180 / Math.PI + 90, transform = ''; if (vy < 0) angle = -angle + 180; transform += 'rotateZ(' + angle + 'deg)'; $moth.css('-webkit-transform', transform). css('-moz-transform', transform). css('transform', transform); }); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉