请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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轴的位移值。

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

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。