通过css实现简单的幻灯片效果（animation）

最新推荐文章于 2023-09-28 10:59:22 发布

HerayChen

最新推荐文章于 2023-09-28 10:59:22 发布

阅读量307

点赞数

分类专栏：笔记文章标签： animation css3 html

本文链接：https://blog.csdn.net/qq_45832807/article/details/104789532

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.animationImg {
				width: 720px;
				height: 405px;
				margin: 200px auto;
				/* 溢出隐藏 */
				overflow: hidden;
				border: 1px solid;
				/* 背景图的大小等于盒子的大小 */
				background-size: cover;
				/* 背景图居中 */
				background-position: center;
				/* 添加动画 */
				animation: myloop 12s;
				/* 动画的速度曲线 */
				animation-timing-function: linear;
				/* 动画的播放次数 infinite 无限循环*/
				animation-iteration-count: infinite;
				/* 动画是否逆向播放 */
				animation-delay: initial;
			}

			@keyframes myloop {
				0% {
					background: url(img/1.jpeg) no-repeat;
				}

				25% {
					background: url(img/1.jpg) no-repeat;
				}

				50% {
					background: url(img/1.jpeg) no-repeat;
				}

				75% {
					background: url(img/1.jpg) no-repeat;
				}

				100% {
					background: url(img/1.jpeg) no-repeat;
				}
		</style>
	</head>
	<body>
		<div class="animationImg"></div>
	</body>
</html>

HerayChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过css实现简单的幻灯片效果（animation）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .animationImg { width: 720px; height: 405px; ...
复制链接

扫一扫