解决inline-block元素的空隙
1. 写法形式直接写在一排 不好看
2. margin外边距 不好控制 不同浏览器对于空袭大小不一样
3. 将父元素的font-size设置为0 子元素重新设置font-size
4. 设置浮动 (父元素有剩余空间 浮动的元素会彼此相邻)
img图片之间也是有间隙
一 动画轮播
<style>
body {
background-color: blue;
}
.swiper {
width: 2500px;
height: 2200px;
margin: 100px auto;
overflow: hidden;
}
.sweiper-img {
width: 2000px;
height: 200px;
background-color: red;
animation: move 8s infinite;
}
.sweiper-img img {
width: 1000px;
height: 800px;
float: left;
margin: 0 10px;
}
@keyframes move {
0% {
transform: translateX(0);
}
35% {
transform: translateX(-500px);
}
70% {
transform: translateX(-1000px);
}
100% {
transform: translateX(-1500px);
}
}
</style>
</head>
<body>
<div class="swiper">
<div class="sweiper-img">
<img src="./img/swiper01.jpeg" alt="">
<img src="./img/swiper02.webp" alt="">
<img src="./img/swiper03.webp" alt="">
<img src="./img/swiper04.webp" alt="">
</div>
</div>
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
