CSS可以实现照片自动播放，让网站更加生动有趣。下面介绍具体实现方法。
/* 设置轮播图容器样式 */
.carousel {
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
/* 设置轮播图中每张图片的位置、大小和样式 */
.carousel img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* 第一张图默认显示 */
.carousel img:first-child {
opacity: 1;
}
/* 设置动画 */
.carousel img:first-child {
animation: carousel 5s linear infinite;
}
/* 动画效果 */
@keyframes carousel {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
以上代码中，首先设置轮播图容器的基本样式，然后设置每张图片的样式，并将所有图片的opacity设置为0，除了第一张图片。第一张图片使用animation属性设置动画，然后设置动画的样式，其中0%到20%的时间段内，第一张图片的opacity为1，33%到53%的时间段内，第一张图片opacity为0。这样设置可以让第一张图片在范围内显示，并在范围外隐藏。最后，将动画无限循环。
