超简单轮播图片 html css

lb.html


html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单图片自动轮播title>
		<link rel="stylesheet" href="css/lb.css" />
	head>
	<body>
		<div class="lb">
			<div id="img">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
				<img src="img/002.gif">
			div>
		div>
	body>
html>

lb.css


.lb
{
	border-radius: 10px;/*边框弧度*/
	width: 45%;
	height: 250px;
	overflow: hidden;/*隐藏图片*/
	margin: 10px 700px 10px 700px;
}
#img
{
	display: block;
	width: 6000px;
	height: 250px;
	animation: bj 20s linear infinite;/*动画*/
}
#img img
{
	float: left;
	width: 1200px;
	height: 100%;
}
@keyframes bj
{
	0%,20%{margin-left: 0px;}
	25%,40%{margin-left: -1200px;}
	45%,60%{margin-left: -2400px;}
	65%,80%{margin-left: -3600px;}
	85%,100%{margin-left: -4800px;}
}

相关阅读:
Istio服务网格进阶⑤：Istio服务网格的流量管理之服务熔断
二叉树(相关术语、创建、遍历、最大深度问题)梳理总结
Spring的基本使用
干货 | 一文搞定 pytest 自动化测试框架
《有钱人和你想的不一样》书籍分享
Ubuntu22.04系统基本配置（分区、NVIDIA驱动安装、docker和nvidia-docker安装）
性能测试中，TPS和RT之间的关系，你知道吗？
vue-cli脚手架创建项目
JavaSE-IO流--IO原理、流的分类、FileReader、FileWriter
元宇宙：活在未来

原文地址：https://blog.csdn.net/m0_70215122/article/details/136384494

超简单 轮播图片 html css

超简单轮播图片 html css