关于技术您现在的位置是:首页 > 关于技术
纯CSS实现广告位3D滚动效果
2019-01-21 18:02:34 【CSS3】 769 人已围观 0 条评论
简介
广告的轮播效果层出不穷,其他的不说,这里不用js,纯css简单的实现类似广告位的3D滚动效果。 话不多说,直接 […]
广告的轮播效果层出不穷,其他的不说,这里不用js,纯css简单的实现类似广告位的3D滚动效果。
话不多说,直接上效果图:
上图效果,每隔2s就会翻转一次(gif图片与页面真实效果会有差异),而且翻转动作带有3D动画效果。
感觉是不是很酷,下面让我们用代码来实现它吧!
页面结构html:
<div class="ad_bg"> <div class="ad_con"> <div class="ad ad_1">广告1</div> <div class="ad ad_2">广告2</div> <div class="ad ad_3">广告3</div> <div class="ad ad_4">广告4</div> </div> </div>
简单的div嵌套结构,如有需要,在最内层div里面添加图片,或者链接即可。
CSS代码:
首先我们需要先将四面广告布局成柱状立体结构,主要利用CSS3的transform属性,具体代码如下:
.ad{ width: 500px; height: 100px; text-align: center; line-height: 100px; font-size: 30px; position: absolute; } .ad_1{ background-color: #ccc; transform: translateY(50px) translateZ(-50px) rotateX(-90deg); } .ad_2{ background-color: green; transform: translateZ(-100px) rotateX(-180deg); } .ad_3{ background-color: deeppink; transform: translateY(-50px) translateZ(-50px) rotateX(90deg); } .ad_4{ background-color: yellowgreen; }
然后,我们需要将广告位整体.ad_con设置为3d运动形式,光设置3d运动还不行,还必须为运动的舞台布景.ad_bg设置一个景深,这样才能看出3d效果。
怎么让其滚动起来呢,那么就用到了animation属性,设置运动时间为8s,匀速运动(一共4面,相当于每翻转1面用时2s),infinite让运动形式无限循环下去。
CSS核心代码:
.ad_bg{ width: 500px; height: 100px; margin: 150px auto; position: relative; perspective: 600px;/*设置景深*/ } .ad_con{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; transform-style: preserve-3d;/*运动形式设为3d运动*/ animation: move 8s linear infinite; }
而move就用来描述我们的运动过程,一个完整的运动过程见如下代码:
@keyframes move { 0%{ transform: translateZ(0px) translateY(0px) rotateX(0deg); } 5%{ transform: translateZ(-50px) translateY(-50px) rotateX(90deg); } 25%{ transform: translateZ(-50px) translateY(-50px) rotateX(90deg); } 30%{ transform: translateZ(-100px) translateY(0px) rotateX(180deg); } 50%{ transform: translateZ(-100px) translateY(0px) rotateX(180deg); } 55%{ transform: translateZ(-50px) translateY(50px) rotateX(270deg); } 75%{ transform: translateZ(-50px) translateY(50px) rotateX(270deg); } 80%{ transform: translateZ(0px) translateY(0px) rotateX(360deg); } 100%{ transform: translateZ(0px) translateY(0px) rotateX(360deg); } }
如此,我们便实现了类似广告位的3D滚动效果咯,是不是很简单啊!狠戳这里,查看效果。点赞,点赞
Over~拜
上一篇: CSS如何优雅地实现目录结构中间横线自适应
下一篇: 模拟360导航首页,文字与背景颜色互换滚动效果
相关推荐
文章评论
点击排行
友情推荐
- 微信公众号:扫描加关注