先看一下浏览器运行结果：
一、
最初用”background-image”背景图片属性定义动画，结果幻灯片切换时没有上下滑动的效果。仅用到HTML和CSS，未用javascript。
二、代码：
HTML:
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="style.css"/></head><body><div class="box"><ul><li><img src="image/01.jpg" alt=""></li><li><img src="image/02.jpg" alt=""></li><li><img src="image/03.jpg" alt=""></li></ul></div></body></html>
CSS:
*{padding: 0;margin: 0;}.box{display: block;width: 800px;height: 360px;overflow: hidden;}ul{position: relative;top: -720px;display: block;width: 800px;height: 1080px;animation:myp 10s infinite linear;}@keyframes myp{33%{top: -360px;}44%{top: -360px;}66%{top: 0;}77%{top: 0;}}li{display: block;/*float: top;*/width: 800px;height: 360px;}li img{display: block;width: 800px;height: 360px;}
三、
代码其实不多，这里说明一下原理吧：
首先设置一个盒子(.box)，把ul放到盒子里。3张图片分别为ul的3个列表项目。ul列表的实际高度是盒子高度的三倍，在盒子中使用 "overflow: hidden"属性,使ul超出盒子的部分隐藏，这样就实现了只能显示一张图片的大小。最后通过 ul 的 top属性调整上边界距离，调用动画改变li的位置从而达到幻灯片效果。
----------------------------------------------分割线----------------------------------------------
第一次更新（.05.24）：
一、代码进行了完善与优化
HTML：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS3幻灯片切换效果</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="slider"><div id="mask"><ul><li id="first"><a href="#"><img src="images/b-ad1.jpg" alt="Python" title="Python"> </a></li><li id="second"><a href="#"><img src="images/b-ad2.jpg" alt="前端开发" title="前端开发"></a></li><li id="third"><a href="#"><img src="images/b-ad3.jpg" alt="Python基础教程" title="Python基础教程"></a></li></ul></div></div></body></html>
CSS:
*{margin:0;padding:0;}li{list-style:none;}#mask {overflow:hidden;/*指定如果内容溢出元素的框，内容会被修剪，并且其余内容是不可见的。*/height:360px;}#slider ul {position:relative;}#slider li {width:800px;height:360px;position:absolute;}@keyframes animation1 {0% {top:0px; }/*初始状态*/20% {top:0px; }/*停留了一会儿时间*/40% {top:360px; }/*向下移动了*/100% {top:720px; }}@keyframes animation2 {0% {top:-360px; }/*初始状态*/20% {top:-360px; }/*停留了一会儿时间*/40% {top:0px;}/*向下移动了*/60% {top:0px;}/*停留了一会儿时间*/80% {top:360px;}/*向下移动了*/100% {top:360px; }/*停留了一会儿时间*/}@keyframes animation3 {0% {top:-720px; }60% {top:-360px; }80% {top:0px; }/*向下移动了*/100% {top:0px;}/*停留了一会儿时间*/}#slider {height:360px;width:800px;margin:40px auto 0;overflow:visible;position:relative;}#first {animation:animation1 15s linear infinite;/*调用动画，整个动画循环一次时长15s，无限次循环*/}#second {animation:animation2 15s linear infinite;}#third {animation:animation3 15s linear infinite;}#slider:hover li{animation-play-state:paused;/*设置超链接伪类，当鼠标悬停在列表项目上的图片上时，动画暂停*/}
运行结果如下:
这次更新主要解决的问题;
1.第三个图像切换后，无法立即切换回第一个图像，需要往上滑动才能回到第一个图像，现在可以在第三个图像播放完之后直接跳转到第一个图像，然后一直循环下去。
2.设置了超链接伪类，当鼠标悬停在列表项目上的图片上时，动画会暂停滚动。
如果觉得《web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
