CSS实现旋转风车
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
CSS实现旋转木马效果可以通过@keyframes规则和animation属性来实现。以下是一个简单的旋转木马样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Carousel</title>
<style>
.carousel {
width: 200px;
height: 200px;
position: relative;
margin: 50px;
}
.carousel img {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
.carousel img.active {
opacity: 1;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.carousel-wrapper {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
animation: rotate 10s infinite linear;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-wrapper">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
</div>
</body>
</html>在这个例子中，.carousel-wrapper是旋转的容器，而.carousel img是需要旋转的图片元素。@keyframes rotate定义了旋转动画，animation属性应用在.carousel-wrapper上，使其无限期地以线性速度旋转。每张图片通过设置不同的opacity值来控制显示和隐藏，实现轮播的效果。
请确保替换图片源src为你的实际图片路径。这个简单的旋转木马可以通过调整animation属性中的时长和其他参数来进行自定义，以适应不同的需求。
评论已关闭