用html和css写一个走马灯效果
时间: 2023-09-30 07:02:40 浏览: 53
以下是一个简单的走马灯效果,使用HTML和CSS实现:
HTML代码:
```
<div class="slider">
<ul>
<li>第一张图片</li>
<li>第二张图片</li>
<li>第三张图片</li>
</ul>
</div>
```
CSS代码:
```
.slider {
width: 600px;
height: 300px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 180%;
animation: slide 10s linear infinite;
}
li {
float: left;
width: 33.33%;
height: 300px;
text-align: center;
font-size: 24px;
line-height: 300px;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
33.33% {
transform: translateX(-100%);
}
66.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0%);
}
}
```
解释:
- 首先,我们创建一个包含三张图片的`<ul>`列表,并将其放置在一个宽度为
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)