100个css js特效

今天我们来了解一下100个CSS JS特效，这些特效可以让你的网站变得更加生动和有趣，吸引更多的访问者。 首先介绍一些CSS的特效。在CSS中，常用的一些特效包括动画、变形、过渡、阴影等。其中，动画是最常见的一种特效，可以为元素添加旋转、缩放、移动等效果。以下是一个旋转动画的例子：

.box {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

除了动画，变形也是一种常见的CSS特效。可以将元素变形为圆形、梯形等形状。以下是一个将正方形变形为圆形的例子：

.box {
border-radius: 50%;
}

其它常见的CSS特效包括过渡和阴影。过渡可以让元素在状态变化时平滑过渡，例如改变颜色、大小等。以下是一个在鼠标悬停时发生颜色过渡的例子：

.box {
transition: background-color 0.5s ease;
}
.box:hover {
background-color: red;
}

阴影可以为元素添加立体感和深度感，以下是一个添加阴影效果的例子：

.box {
box-shadow: 4px 4px 8px #555;
}

接下来是JS的特效。在JS中，常用的特效包括轮播、滚动、加载等。其中，轮播效果可以让多个图片循环播放，滚动效果可以让页面滚动起来，加载效果可以让页面更加生动。以下是一个轮播效果的例子：

let index = 0;
let slides = document.querySelectorAll('.slide');
function showSlide(n) {
for (let i = 0; i = slides.length) {
index = 0;
}
showSlide(index);
}
setInterval(nextSlide, 3000);

以上是100个CSS JS特效的介绍。希望可以为你的网站添加更多的亮点，吸引更多的访问者。

查看更多关于100个css js特效的详细内容...