广告图片在网页中飘动不用js
时间: 2024-10-12 18:05:16 浏览: 42
要在网页中实现广告图片的飘动效果,而无需JavaScript,你可以利用CSS的动画功能。CSS动画允许你通过设置关键帧(keyframes)来控制元素的运动路径和时间。以下是一个简单的例子:
1. 首先,给需要飘动的图片添加一个类名,比如`.floating-ad`。
```html
<img src="ad.jpg" class="floating-ad">
```
2. 然后,在CSS文件中定义动画规则。例如,让图片水平左右平移:
```css
.floating-ad {
position: relative;
animation-name: slideAd;
animation-duration: 4s; /* 持续时间 */
}
@keyframes slideAd {
0% { left: 0px; }
50% { left: 50px; }
100% { left: -50px; } /* 回到原点 */
}
```
这个例子中,图片会在4秒内从左往右滑动50像素,然后返回到原来的位置。你可以调整关键帧百分比和距离,来创建不同的飘动效果。
阅读全文
相关推荐


















