有了网站源码怎么做网页,赣州网站设计有哪些,四大软件外包公司,wordpress显示自定义分类文章数量实现鼠标跟随渐变效果的详细过程#xff1a;
1. HTML 结构
我们在 HTML 中创建了一个 div 元素#xff0c;用于展示渐变效果。这个元素的 ID 是 gradient-box#xff0c;方便在 JavaScript 中进行操作。
2. CSS 样式
CSS 变量#xff1a;在 :root 中定义了两个…实现鼠标跟随渐变效果的详细过程
1. HTML 结构
我们在 HTML 中创建了一个 div 元素用于展示渐变效果。这个元素的 ID 是 gradient-box方便在 JavaScript 中进行操作。
2. CSS 样式
CSS 变量在 :root 中定义了两个 CSS 变量 --mouse-x 和 --mouse-y用于存储鼠标位置的百分比值。这些变量会被用于控制渐变的中心位置。渐变背景div 元素的背景设置为径向渐变radial-gradient其中心位置由 --mouse-x 和 --mouse-y 控制。初始值为 50%即居中显示。
3. JavaScript 逻辑
事件监听为 div 元素添加 mousemove 事件监听器。当鼠标在 div 上移动时会触发 updateMousePosition 函数。计算鼠标位置 使用 getBoundingClientRect() 获取 div 元素的边界信息。计算鼠标在 div 内的相对位置并将其转换为百分比值。 更新 CSS 变量 使用 style.setProperty() 方法将计算得到的百分比值更新到 --mouse-x 和 --mouse-y 变量上。由于这些变量直接影响 div 的背景渐变因此每次鼠标移动时渐变的中心位置都会实时更新。
4. 整体效果
通过上述步骤div 元素的背景渐变会根据鼠标在其上的位置动态变化形成一个跟随鼠标移动的视觉效果。这种实现方式利用了 CSS 变量的动态特性和 JavaScript 的事件处理能力使得效果流畅且易于维护。 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle:root {--mouse-x: 50%;--mouse-y: 50%;}div {width: 1200px;height: 1200px;cursor: pointer;border: 1px solid #6794ee;background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(10, 34, 243, 0.5),rgba(255, 0, 0, 0.2));}/style
/head
bodydiv idgradient-box/divscript// 修正函数定义function updateMousePosition(event) {const rect event.currentTarget.getBoundingClientRect();const mouseX ((event.clientX - rect.left) / rect.width) * 100;const mouseY ((event.clientY - rect.top) / rect.height) * 100;document.documentElement.style.setProperty(--mouse-x, ${mouseX}%);document.documentElement.style.setProperty(--mouse-y, ${mouseY}%);}// 添加事件监听const gradientBox document.getElementById(gradient-box);gradientBox.addEventListener(mousemove, updateMousePosition);/script
/body
/html
