随着Web技术的发展，JavaScript特效在网页设计中变得越来越重要。本文将介绍十大JS网页特效代码，帮助您为网站添加吸引人的动态效果，提高用户体验和互动性。
一、背景动画特效
1. 粒子背景动画
粒子背景动画能够使网页背景变得生动活泼，常用于科技、游戏类网站。通过使用Three.js等库，可以实现复杂的粒子动画效果。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Particle Background</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script></head><body> <script> // Three.js particle animation setup </script></body></html>
二、平滑滚动效果
2. 平滑滚动到指定位置
平滑滚动能够改善用户导航体验，尤其在单页应用中非常常见。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Smooth Scroll</title>
<style>
html {
scroll-behavior: smooth;
} </style></head><body>
<a href="#section1">Scroll to Section 1</a>
<div id="section1" style="margin-top: 1000px;">Section 1</div></body></html>三、悬停动画效果
3. 图片悬停放大
图片悬停放大效果可以使用户在浏览图片时有更好的视觉体验。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Hover Zoom</title>
<style>
img:hover { transform: scale(1.2); transition: transform 0.5s ease;
} </style></head><body>
<img src="image.jpg" alt="Sample Image"></body></html>四、滚动触发动画
4. 滚动触发元素显示
通过使用AOS（Animate On Scroll）库，可以在用户滚动页面时触发动画效果。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Scroll Animation</title> <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" /></head><body> <div data-aos="fade-up">Scroll to animate</div> <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> <script> AOS.init(); </script></body></html>
五、全屏滑动页面
5. 全屏滚动页面
使用fullPage.js库，可以轻松实现全屏滚动效果，适合于介绍类网站或单页应用。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Full Page Scroll</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" /></head><body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', { autoScrolling: true
}); </script></body></html>六、加载动画
6. 页面加载动画
页面加载动画能够提高用户在等待页面加载时的体验，常见于内容较多或需要加载大量资源的网站。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Loading Animation</title>
<style>
#loader { position: fixed; width: 100%; height: 100%; background: white; z-index: 1000; display: flex; justify-content: center; align-items: center;
} .spinner { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; animation: spin 2s linear infinite;
} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
} </style></head><body>
<div id="loader">
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', function () { document.getElementById('loader').style.display = 'none';
}); </script></body></html>七、输入框动画
7. 输入框聚焦动画
输入框聚焦动画能够增强用户交互体验，常见于表单设计中。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Input Focus Animation</title>
<style>
.input-container { position: relative; margin: 20px 0;
} input { border: 1px solid #ccc; padding: 10px; transition: border-color 0.3s;
} input:focus { border-color: #3498db;
} </style></head><body>
<div class="input-container">
<input type="text" placeholder="Enter text">
</div></body></html>八、卡片翻转动画
8. 卡片翻转效果
卡片翻转效果能够增加页面的互动性和趣味性，适用于展示信息的卡片设计。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Card Flip</title>
<style>
.card { perspective: 1000px;
} .card-inner { position: relative; width: 200px; height: 300px; transition: transform 0.6s; transform-style: preserve-3d;
} .card:hover .card-inner { transform: rotateY(180deg);
} .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
} .card-back { transform: rotateY(180deg);
} </style></head><body>
<div class="card">
<div class="card-inner">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>
</div></body></html>九、倒计时动画
9. 倒计时效果
倒计时效果适用于促销活动和重要事件提醒，通过动画形式展示倒计时过程。
示例代码：
html复制代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Countdown Timer</title></head><body>
<div id="countdown"></div>
<script>
function countdown(endDate) { let days, hours, minutes, seconds;
endDate = new Date(endDate).getTime(); if (isNaN(endDate)) return; setInterval(calculate, 1000); function calculate() { let startDate = new Date();
startDate = startDate.getTime(); let timeRemaining = parseInt((endDate - startDate) / 1000); if (timeRemaining >= 0) {
days = parseInt(timeRemaining / 86400);
timeRemaining = (timeRemaining % 86400);
hours = parseInt(timeRemaining / 3600);
timeRemaining = (timeRemaining % 3600);
minutes = parseInt(timeRemaining / 60);
seconds = parseInt(timeRemaining % 60); document.getElementById("countdown").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s";
} else { return;
}
}
}
(function () { countdown('12/31/2024 00:00:00 AM');
}()); </script></body></html> 《9大js网页特效代码》来自【燎元跃动小编】收集整理于网络，不代表本站立场，转载联系作者并注明出处：https://www.cheapviagraws.com/baike/196.html
