JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip资源-CSDN文库

共4个文件

js：1个

scss：1个

css：1个

版权申诉

128 浏览量 2022-11-01 01:17:35 上传评论收藏 5KB ZIP 举报

该资源是一个基于JavaScript (JS) 和CSS3技术，结合SVG（可缩放矢量图形）实现的3D跟随鼠标感应的悬浮动画特效源码。这个特效通常用于网站设计，为用户提供交互式的视觉体验，增强网站的吸引力和用户体验。以下是关于这些技术的详细解释： **JavaScript (JS)**：JavaScript是一种广泛使用的脚本语言，主要用于网页和网络应用的前端开发。它在浏览器端运行，负责处理用户交互、动态内容、页面动画等任务。在这个项目中，JavaScript用于捕捉鼠标移动事件，计算元素的位置和旋转角度，从而实现3D跟随鼠标的效果。 **CSS3**：CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。CSS3是其最新版本，增加了许多新功能，如选择器、动画、转换、过渡和阴影效果。在这个特效中，CSS3被用来定义元素的初始样式，以及通过变换（transform）属性实现3D旋转和平移，配合JavaScript动态更新这些属性，实现动画效果。 **SVG (可缩放矢量图形)**：SVG是一种基于XML的矢量图像格式，它可以无损地缩放，且文件大小相对较小。SVG适合创建图形、图标和复杂的艺术设计，尤其在响应式设计中十分有用。在这个项目中，SVG可能被用来创建3D图形元素，因为它们可以被JavaScript轻松操作，进行动态变换，同时保持清晰的画质。 **3D 跟随鼠标感应**：这种特效意味着图形元素会根据鼠标在屏幕上的位置进行3D旋转和移动，创造出一种立体的跟随感。这通常通过JavaScript获取鼠标坐标，然后计算出每个元素相对于鼠标的3D位置和角度，再使用CSS3的`transform`属性来实现元素的3D变换。 **悬浮动画**：悬浮动画是指元素在用户滚动页面时始终保持在屏幕特定位置的视觉效果。这种效果常用于导航菜单或固定通知，使用户始终能快速访问。在这个案例中，悬浮可能指的是3D图形元素始终固定在鼠标附近，无论鼠标如何移动，它们都会跟随并保持在视觉焦点上。这个源码提供了利用现代Web技术实现交互式3D动画的方法，对于学习JavaScript、CSS3和SVG的开发者来说具有很高的学习价值。通过研究和理解这段代码，开发者可以提升自己的前端技能，创造出更富有动态感和创新性的网页效果。

资源推荐

资源详情

资源评论

收起资源包目录

JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip （4个子文件）

132677884195348064

css

style.css 7KB

index.html 14KB

index.js 1KB

scss

style.scss 4KB

<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>3D跟随鼠标感应悬浮动画</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class='container'> <ul> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p> </div> </li> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484

评论收藏

内容反馈

版权申诉