艾Q网

标题: CSS实现广告漂浮效果 [打印本页]

作者: admin 时间: 2023-11-11 10:13
标题: CSS实现广告漂浮效果
CSS实现广告漂浮效果是网页设计中比较常见的一种效果，可以吸引用户的注意力，并提升广告的点击率。下面介绍一下如何使用CSS实现广告漂浮效果。

代码如下：
.floatAd {
position: fixed;
bottom: 20px;
right: 20px;
width: 250px;
height: 250px;
background-color: #fff;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
上述代码中，.floatAd是广告容器的类名，设置了容器的位置、大小、背景色、阴影效果以及层级。animation属性设置了广告容器的动画效果，其中float为动画名称，3s为动画时长，ease-in-out为动画速度曲线，infinite为循环播放动画。

在@keyframes float中，分别设置了广告容器的3个状态：开始状态，中间状态和结束状态。使用transform属性设置容器位置的变化，translate函数中的参数分别为x轴和y轴的位移值。

这样，在页面上即可看到广告容器漂浮的效果。

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)