网页轮播图

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS实现轮播图(自动轮播)title>
	<style>
/* 自动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
}

/* 动画关键帧 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1200px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-2400px);
	}
	60%,70%{
		/* margin-left: -3600px; */
		transform: translateX(-3600px);
	}
	80%,90%{
		/* margin-left: -4800px; */
		transform: translateX(-4800px);
	}
	100%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
}
	style>
	
head>

<body>
	
	<div class="banner-container">
		
		<div class="banner-img-container">
			<img src="https://i1.mifile.cn/a4/xmad_15648327213423_KQdjZ.jpg" alt="">
			<img src="https://i1.mifile.cn/a4/xmad_15648844833902_qXyxW.jpg" alt="">
			<img src="https://i1.mifile.cn/a4/xmad_15650061412258_gjQPE.jpg" alt="">
			<img src="https://i1.mifile.cn/a4/xmad_15627255042708_pFaEU.jpg" alt="">
			<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/08a499505c6850bee6f2bafa04688b26.jpg" alt="">
		div>
	div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

相关阅读:
docker--redis容器部署及与SpringBoot整合-I
账务处理程序、记账凭证账务处理程序、汇总记账凭证账务处理程序、科目汇总表账务处理程序、会计信息化概述、信息化环境下会计账务处理的基本要求（此章出1道小题）
Spring Cloud 学习纪要一：Eureka
【CVPR2022】Detecting Camouﬂaged Object in Frequency Domain
模板引擎小结-使用
DS-fundation-sort1
仅售 15 美元，树莓派 Zero W 继任者终于发布，可惜没躲过全球缺“芯”
超算/先进计算的专项训练及考核的内容是什么？
Element学习使用
vue学习之v-if/v-else/v-else-if

原文地址：https://blog.csdn.net/weixin_43310774/article/details/134027337