web前端运用CSS动画实现图像的幻灯片自动播放切换效果

先看一下浏览器运行结果：

一、

最初用”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="data:image/01.jpg" alt=""></li><li><img src="data:image/02.jpg" alt=""></li><li><img src="data: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的位置从而达到幻灯片效果。

----------------------------------------------分割线----------------------------------------------
第一次更新（2020.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="data:images/b-ad1.jpg" alt="Python" title="Python"> </a></li><li id="second"><a href="#"><img src="data:images/b-ad2.jpg" alt="前端开发" title="前端开发"></a></li><li id="third"><a href="#"><img src="data: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动画实现图像的幻灯片自动播放切换效果相关推荐

canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...

web前端运用CSS动画实现图像的幻灯片自动播放切换效果

web前端运用CSS动画实现图像的幻灯片自动播放切换效果相关推荐

最新文章

热门文章

web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果

web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果相关推荐

最新文章

热门文章

web前端运用CSS动画实现图像的幻灯片自动播放切换效果

web前端运用CSS动画实现图像的幻灯片自动播放切换效果相关推荐