制作页面中的漂浮广告鼠标移上去停止
时间: 2024-05-11 09:13:58 浏览: 145
以下是一种实现方法:
HTML代码:
```html
<div class="floating-ad">这里是漂浮广告</div>
```
CSS代码:
```css
.floating-ad {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background-color: #ffcc00;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 24px;
}
.floating-ad:hover {
animation-play-state: paused;
}
```
解释:
- 使用 `position: fixed` 将广告固定在页面上方便漂浮。
- 使用 `bottom` 和 `right` 将广告定位到页面的右下角。
- 使用 `width` 和 `height` 控制广告的大小。
- 使用 `background-color` 和 `color` 控制广告的颜色。
- 使用 `text-align` 和 `line-height` 控制广告内容的居中和行高。
- 使用 `font-size` 控制广告内容的字体大小。
- 在 `:hover` 伪类中使用 `animation-play-state: paused` 停止动画,实现鼠标移上去停止的效果。
注意:
- `animation-play-state` 属性是 CSS3 中的动画属性,用于控制动画的播放状态。默认值为 `running`,即播放状态,可以设置为 `paused`,即暂停状态。
- 上面的 CSS 代码中没有实现漂浮动画效果,如需实现,可以通过 CSS3 中的 `animation` 属性或 `transform` 属性来实现。
阅读全文