html图片滚动效果代码
时间: 2023-08-10 10:04:57 浏览: 53
以下是一个简单的HTML图片滚动效果的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片滚动效果</title>
<style>
.container {
overflow: hidden;
width: 500px;
height: 200px;
}
.slider {
display: flex;
width: 1000px;
height: 200px;
animation: slide 10s infinite;
}
.slider img {
width: 500px;
height: 200px;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-500px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</div>
</body>
</html>
```
该代码使用了CSS的动画效果 `@keyframes` 和 `transform` 属性来实现图片的滚动效果。其中,`.container` 用于设置滚动区域的大小和隐藏超出区域的内容,`.slider` 是滚动的图片容器,`img` 标签用于显示图片。动画效果通过 `@keyframes` 定义,每张图片在水平方向上向左移动 `500px` 的距离。`animation` 属性用于指定动画的名称、执行时间和执行次数。