安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
用 JavaScript 制作鼠标移动时的星星轨迹动画
编号:星轨迹

用 JavaScript 制作鼠标移动时的星星轨迹动画

大小 9 KB
总文件 5 个
发布 2024-04-02
更新 2026-01-17
架构 JavaScript
分类 前端资源 - 其他插件
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

这段 JavaScript 代码可在鼠标移动事件中创建多种颜色、多种大小、多种朝向的星星轨迹动画,当鼠标移动时,星星就会出现,它会计算鼠标的移动并相应地显示星星。这将为网页增添互动和动态元素,您可以在各类网站上使用此代码,添加吸引眼球的互动功能,它通过创建动态视觉效果来提高用户参与度。这对于作品集、登陆页面或互动页面网站尤为有用。

下面展示如何用 Javascript 在鼠标移动时创建星轨动画

1.首先创建一个 HTML 文件。在 <body> 标签中,添加一个 <h1> 元素,其中包含类似 "移动你的鼠标 "的信息。

<h1>移动鼠标</h1>

2.创建 CSS 文件(styles.css),为 HTML 元素添加样式。在本例中,我们将定义星星和背景的外观。

/*这里仅展示部分示例代码,下载后查看完整版代码*/
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap");
.star {
  transform-style: preserve-3d;
  width: 1px;
  height: 1px;
  position: absolute;
  color: red;
}

3.创建一个 JavaScript 文件(script.js)来处理动画。这段代码会计算鼠标的移动,并相应地添加星星。

/*这里仅展示部分示例代码,下载后查看完整版代码*/
let x1=0, y1=0;
window.client
const 
  vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
  dist_to_draw = 50,
  delay = 1000,
  fsize = [
    '1.1rem', '1.4rem', '.8rem', '1.7rem'
  ],
  colors = [
  '#E23636',
  '#F9F3EE',
  '#E1F8DC',
  '#B8AFE6',
  '#AEE1CD',
  '#5EB0E5'
],

在网络浏览器中打开 HTML 文件。在屏幕上移动鼠标,你会看到星星随着鼠标的移动而出现,制作出迷人的星轨动画。

模板目录结构

    最新资源

    Three.js立体翻页书,纸雕世界展开与收合动画

    纸雕故事

    Three.js立体翻页书,纸雕世界展开与收合动画
    Three.js深海水母,发光粒子与繁衍生态模拟动画

    微光水族

    Three.js深海水母,发光粒子与繁衍生态模拟动画
    工业制造与工厂展示 HTML 响应式网站模板

    法博工业

    工业制造与工厂展示 HTML 响应式网站模板
    物流运输与货运服务 HTML 响应式网站模板

    凯运

    物流运输与货运服务 HTML 响应式网站模板
    SVG西瓜加载动画,圆弧果肉与瓜籽循环转动效果

    夏日等待

    SVG西瓜加载动画,圆弧果肉与瓜籽循环转动效果
    JavaScript液态标志,苹果轮廓流动变形效果

    流体图形

    JavaScript液态标志,苹果轮廓流动变形效果