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

共5个文件

png：3个

html：1个

js：1个

版权申诉

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

在本资源中，"jQuery+css3实现极富创意的飞蛾追逐动画404页面效果源码.zip"，我们主要探讨的是如何利用jQuery库和CSS3技术来创建一个引人注目的404错误页面。这个404页面不仅具有交互性，还通过动态的飞蛾追逐动画为用户提供独特的体验。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在404页面设计中，jQuery可能被用来控制飞蛾动画的开始、结束以及与用户的交互，例如响应鼠标移动或其他用户行为。 CSS3是层叠样式表的最新版本，它引入了许多新特性，如选择器、动画、转换、过渡和阴影等。在这个项目中，CSS3的动画和转换功能是关键。飞蛾追逐的动画效果很可能就是通过CSS3的关键帧动画（@keyframes）来实现的，这允许开发者定义动画的不同阶段，并让浏览器平滑地从一个阶段过渡到另一个阶段。同时，CSS3的变换（transform）属性可以用于改变元素的位置、大小、形状或角度，使得飞蛾仿佛在屏幕上飞翔。为了创建飞蛾追逐的效果，开发者可能使用了以下CSS3技术： 1. `animation`属性：结合`@keyframes`规则定义动画的名称、持续时间、延迟、次数和方向等。 2. `transform`属性：改变飞蛾的位置（translateX, translateY）、旋转（rotate）和缩放（scale），模拟其飞行轨迹。 3. `transition`属性：定义元素在特定属性改变时的过渡效果，比如飞蛾在接近或远离用户的瞬间，可能会有透明度的变化。 4. `@media`查询：根据屏幕尺寸和设备类型调整动画效果，确保在不同设备上都有良好的表现。同时，jQuery可能被用来处理以下功能： 1. 触发动画：当页面加载或用户触发特定事件（如滚动、点击）时，使用`.animate()`或`.toggleClass()`方法启动或停止动画。 2. 用户交互：监听鼠标移动事件，根据鼠标位置更新飞蛾的运动路径，使它们看起来在追逐光标。 3. 动态效果：可能使用`.fadeOut()`和`.fadeIn()`方法，增加飞蛾出现和消失的动态效果，提升用户体验。在压缩包中的文件"132686969980972139"，可能是HTML、CSS和JavaScript文件的组合，包含实现这个飞蛾动画的所有代码。要深入了解并学习这个效果，你需要解压文件，查看源代码，理解每一部分的作用，然后根据自己的需求进行修改或应用到其他项目中。这个项目展示了jQuery和CSS3如何协同工作，为网页带来生动有趣的动画效果，对于前端开发者来说，这是一个学习动态效果和交互设计的绝佳实例。通过研究和实践，你可以提升自己的前端技能，创造出更多吸引人的网页元素。

资源推荐

资源详情

资源评论

收起资源包目录

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>

评论收藏

内容反馈

版权申诉