1.需要先用HTML写出轮播需要的框架
2.用CSS对框架进行装饰
3.用CSS3里动画 (animation)
先把整个动画的过程进行分析,把图片的偏移量为盒子的宽
在需要动的图片父盒子样式中加 动画(animation)
👉想有图片停顿的话
4.划过暂停
对图片的祖盒子添加划过父盒子添加( animation-play-state: paused;)
以下为全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.con {
width: 640px;
height: 480px;
margin: 300px auto;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.con1 {
display: flex;
animation: move 10s linear infinite backwards;
}
@keyframes move {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-640px);
}
25% {
transform: translateX(-640px);
}
40% {
transform: translateX(-1280px);
}
45% {
transform: translateX(-1280px);
}
60% {
transform: translateX(-1920px);
}
65% {
transform: translateX(-1920px);
}
80% {
transform: translateX(-2560px);
}
85% {
transform: translateX(-2560px);
}
100% {
transform: translateX(-3200px);
}
}
.con:hover .con1 {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="con">
<div class="con1">
<img src="./img1.jpg" alt="">
<img src="./img2.jpg" alt="">
<img src="./img3.jpg" alt="">
<img src="./img4.jpg" alt="">
<img src="./img5.jpg" alt="">
<img src="./img1.jpg" alt="">
</div>
</div>
</body>
</html>