知识问答

网页常用特效代码整理

发布时间：2026-05-09 23:45:06 浏览量：0

让我为大家详细讲解“网页常用特效代码整理”的完整攻略。

网页常用特效代码整理

在网页设计与开发中，为了突出页面的特色，常常使用一些特效达到吸引用户的目的。以下整理了几种常用的特效代码，供大家参考。

动画效果

CSS3 Transition 过渡效果

CSS3 过渡是通过指定起始状态和结束状态来实现的，中间的状态由浏览器计算。可以用在 hover、 click 等事件上。

/* 示例 1：改变文字颜色 */transition: color 0.5s ease;/* 示例2：改变 p 背景色 */transition: background-color 0.5s ease;/* 示例3：改变图片大小 */transition: width 2s ease, height 2s ease;

CSS3 Animation 动画效果

CSS3 动画通过指定关键帧，在运动过程中元素的状态会经历一系列变化，与过渡的区别是可自定义中间状态的变化。

/* 示例 1：心跳效果 */@keyframes heartbeat {  0% {    transform: scale(1);  }  50% {    transform: scale(1.1);  }  100% {    transform: scale(1);  }}/* 示例 2：旋转效果 */@keyframes rotate {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}

滚动效果

SmoothScroll.js

SmoothScroll.js 是一款轻量级的 JavaScript 库，能够在网页滚动时扮演平滑滚动的角色。

<!-- 在 head 标签内引用 SmoothScroll.js 库 --><head>  <script src="https://cdn.jsdelivr.net/npm/smoothscroll-polyfill@1.1.4/dist/smoothscroll.min.js"></script></head><!-- 在 body 标签内设置锚点，并添加相关链接 --><body>  <a href="#section1">Section 1</a>  <p id="section1">This is Section 1.</p></body><!-- 在 CSS 文件内设置锚点链接的样式 -->a[href^="#"] {  text-decoration: none;}

粒子效果

Particles.js

Particles.js 是一个用于创造粒子效果的 JavaScript 库，能够将任意 DOM 元素转化为其他不同的粒子元素。

<!-- 在 body 标签内设置容器元素，引用 particles.js --><body>  <p id="particles-js"></p>  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script></body><!-- 在 JavaScript 文件内设置粒子效果的属性 -->particlesJS("particles-js", {  /* 粒子效果的配置信息 */  "particles": {    "number": {"value": 80},    "size": {"value": 3},    "color": {"value": ["#fd7e14", "#6610f2", "#007bff"]},    /* ... */  },  /* 互动性设置（例如：鼠标悬停响应） */  "interactivity": {    "detect_on": "canvas",    "events": {      "onhover": {"enable": true, "mode": "repulse"}    },    /* ... */  }});