前端常用的网页特效代码大全整理
在网页设计与开发中，为了突出页面的特色，常常使用一些特效达到吸引用户的目的。以下整理了几种常用的特效代码，供大家参考。
动画效果
CSS3 Transition 过渡效果
CSS3 过渡是通过指定起始状态和结束状态来实现的，中间的状态由浏览器计算。可以用在 hover、 click 等事件上。
/* 示例 1：改变文字颜色 */
transition: color 0.5s ease;
/* 示例2：改变 div 背景色 */
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>
<div id="section1">This is Section 1.</div>
</body>
<!-- 在 CSS 文件内设置锚点链接的样式 -->
a[href^="#"] {
text-decoration: none;
}
粒子效果
Particles.js
Particles.js 是一个用于创造粒子效果的 JavaScript 库，能够将任意 DOM 元素转化为其他不同的粒子元素。
<!-- 在 body 标签内设置容器元素，引用 particles.js -->
<body>
<div id="particles-js"></div>
<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"}
},
/* ... */
}
});
以上就是“网页常用特效代码整理”的完整攻略，希望对您有所帮助。
