轮播效果：

最新推荐文章于 2022-12-29 20:48:01 发布

浅沫......

最新推荐文章于 2022-12-29 20:48:01 发布

阅读量158

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127989201

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 850px;
               height: 550px;
               border: 1px solid red;
               margin: 50px auto;
               background: url(img/1.webp) no-repeat center/100% 100%;
               animation:luo 9s linear infinite;
           }
           @keyframes luo{
               0,30%{
                   background: url(img/1.webp) no-repeat center/100% 100%;
               }
               35%,65%{
                   background: url(img/2.jpg) no-repeat center/100% 100%;
               }
               70%,100%{
                   background: url(img/3.webp) no-repeat center/100% 100%;
               }
           }
       </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 850px;
				height: 550px;
				border: 1px solid red;
				margin: 50px auto;
				background: url(img/1.webp) no-repeat center/100% 100%;
				animation:luo 9s linear infinite;
			}
			@keyframes luo{
				0,30%{
					background: url(img/1.webp) no-repeat center/100% 100%;
				}
				35%,65%{
					background: url(img/2.jpg) no-repeat center/100% 100%;
				}
				70%,100%{
					background: url(img/3.webp) no-repeat center/100% 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>