php网页图片向右移动,怎么在网页中设置图片进行左右滑动
时间: 2023-09-19 19:10:49 浏览: 83
图片左右滑动
你可以使用CSS的`animation`属性来实现图片的左右滑动。以下是一个简单的代码示例:
HTML代码:
```
<div class="slider">
<img src="your-image.jpg">
</div>
```
CSS代码:
```
.slider {
overflow: hidden;
}
.slider img {
animation: slide 5s infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
```
在上面的代码中,`overflow: hidden`属性用于隐藏图片超出容器的部分。`animation`属性定义了动画效果,`slide`是动画的名称,`5s`表示动画持续时间为5秒,`infinite`表示动画无限循环。
`@keyframes`定义了动画的关键帧,这里是从左到右移动50%再回到原来位置的效果。你可以根据需要调整关键帧的百分比和动画效果。
阅读全文