关于技术您现在的位置是:首页 > 关于技术

纯CSS实现广告位3D滚动效果

头像 2019-01-21 18:02:34 152 人已围观 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~拜

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号