CSS3干货15:旋转摩天轮

今天做项目,无意看到个摩天轮效果,甚是有意思,决定自己来做做。原效果是JS 写的,我懒得用JS,就用 CSS3 写一个。那么多美女围绕着转,开心的要死,所以放了个单纯的小男孩在中间代表我的心情~

效果动图如下:

CSS3干货15:旋转摩天轮

旋转的图片想做都少都无所谓,我这里做12个。

主要的原理就是利用了 CSS3 的 transform 的位移 和 旋转变形,以及帧动画。

HTML结构

12张图,就用一个 ul 结合 12 个 li 来做。注意,这里有 span 标签,后面有用~!

<div class="box">
    <ul>
        <li><span><img src="../images/3d/1.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/2.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/3.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/4.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/5.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/6.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/7.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/8.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/9.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/10.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/11.jpg" alt=""></span></li>
        <li><span><img src="../images/3d/12.jpg" alt=""></span></li>
    </ul> 
</div>

样式分析

1、box 的大小任意,但是一定是一个正方形。

让它相对定位,是因为 li 的位置需要任意摆放,li 肯定是绝对定位的,那么 box 就必须相对定位。

.box{
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 10px;
}

ul 是一个宽高略小于 box 圆形,且在 box 的中心位置。

ul{
    border:1px #000 dashed;
    margin:auto;
    position: relative;
    width: 340px;
    height: 340px;
    border-radius: 100%;
    top: 30px;
  }

 

2、为了方便控制 li 的位置,先让 li 摆放到 box 的中心去,再调整位置,到 12 点方位。以12点方位为起点,调整每个 li 的位置。并且把li的旋转中心,也就是 transform-origin 属性,一定要图片下方 200px 的位置。为啥 200px?因为 box 的宽高一半就是 200px 。 

li{
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: absolute;
    border-radius: 100%;
    left:50%;
    margin-left: -30px;
    margin-top: -30px;
    top:50%;
    transform-origin: center 200px;   /* 调整旋转中心,水平居中,垂直坐标为图片下方200px */
}

这个时候,图片还是在中心上,还没放到各自的位置。

3、关键的来了,把 li 摆放到各自的位置上。li 要围绕 box 的中心,摆在12个方位上。每个位置到中心点的距离一样,只是旋转的度数不同。例如,第一个 0 度的话,第二个就旋转 30 度,第三个 60 度,依次类推。为啥 30 ? 因为  360 / 12 = 30 啊~!

这里可以看出来,每个方位的旋转度是 360 / 内容个数。

每个 li 添加样式:

transform: translateY(-170px)   rotateZ(  索引*30 + deg);
  • translateY 是控制位移,往上放移动 170。为啥 170? 因为图片还有 60px 宽度,不能超出 box 范围,图片中心距离 box 边缘还有 30px。
  • rotateZ 是围绕 z 轴,就是垂直于屏幕的坐标轴旋转。 每个 li 旋转 索引*30 度。控制每个 li 用 nth-child( 索引 )。注意,这里的索引是从 1 开始的。
.box li:nth-child(1) {
    transform: translateY(-170px) rotateZ(0deg); 
}

.box li:nth-child(2) {
    transform: translateY(-170px) rotateZ(30deg); 
}

依次类推。

但是,图片要始终是要摆正的。所以,图片要反向旋转对应的度数。

.box li:nth-child(1) img {
   transform: rotateZ(0deg); 
}
.box li:nth-child(2) img {
   transform: rotateZ(-30deg); 
}

按照这个思路写 12 个。有点多~~ 

4、最后动起来。让摩天轮旋转~!

 ul{
    animation:MoTianLun 50s infinite linear;
  }
@keyframes MoTianLun {
  0%{
     transform:rotateZ(0)
  }
  100%{
    transform:rotateZ(360deg)
  }
}

每个图片也会跟着旋转,会歪斜。要持续摆正,就做反向旋转动画。但是之前图片已经写了 transform 的旋转了,所以反向旋转的动画就写在 span 标签上。

 li>span{
    animation:MoTianLun 50s infinite linear reverse;
  }

考虑到每个 li 的位置写起太麻烦,其实我是用 SCSS 写的。完整 SCSS 代码如下:

@charset "utf-8";
*{
  margin: 0;
  padding: 0;
}
ul,li,ol{
  list-style: none;
}
img{
  border:none;
}

.boy{
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top:50%;
  margin-left: -100px;
  margin-top: -100px;
  z-index: 1;
  overflow: hidden;
  img{
    width: 200px;
    height: 200px;
    border-radius: 100%;
  }
}

.box{
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 10px;
  ul{
    border:1px #000 dashed;
    margin:auto;
    position: relative;
    width: 340px;
    height: 340px;
    border-radius: 100%;
    top: 30px;
  }
  li img{
    width: 60px;
    height: 60px;
  }
  li{
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: absolute;
    border-radius: 100%;
    left:50%;
    margin-left: -30px;
    margin-top: -30px;
    top:50%;
    transform-origin: center 200px;
    span{
      display: block;
      width: 60px;
      height: 60px;
      overflow: hidden;
    }
  }
  @for $i from 1 through 12{
    $deg:$i*30-30;
    li:nth-child(#{$i}){
        transform: translateY(-170px)  rotateZ($deg+deg);
        img{
          transform:rotateZ(-$deg+deg);
        }
    }
  }
}
.box{
  ul{
    animation:MoTianLun 50s infinite linear;
  }
  li>span{
    animation:MoTianLun 50s infinite linear reverse;
  }
}
@keyframes MoTianLun {
  0%{
     transform:rotateZ(0)
  }
  100%{
    transform:rotateZ(360deg)
  }
}

没有SCSS环境的朋友,也可以使用完整 CSS, 代码如下:

* {
  margin: 0;
  padding: 0; }

ul, li, ol {
  list-style: none; }

img {
  border: none; }

.boy {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  z-index: 1;
  overflow: hidden; }
  .boy img {
    width: 200px;
    height: 200px;
    border-radius: 100%; }

.box, .box ul {
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 10px; }
  .box ul {
    border: 1px #000 dashed;
    margin: auto;
    position: relative;
    width: 340px;
    height: 340px;
    border-radius: 100%;
    top: 30px; }
  .box li img {
    width: 60px;
    height: 60px; }
  .box li {
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: absolute;
    border-radius: 100%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    top: 50%;
    transform-origin: center 200px; }
    .box li span {
      display: block;
      width: 60px;
      height: 60px;
      overflow: hidden; }
  .box li:nth-child(1) {
    transform: translateY(-170px) rotateZ(0deg); }
    .box li:nth-child(1) img {
      transform: rotateZ(0deg); }
  .box li:nth-child(2) {
    transform: translateY(-170px) rotateZ(30deg); }
    .box li:nth-child(2) img {
      transform: rotateZ(-30deg); }
  .box li:nth-child(3) {
    transform: translateY(-170px) rotateZ(60deg); }
    .box li:nth-child(3) img {
      transform: rotateZ(-60deg); }
  .box li:nth-child(4) {
    transform: translateY(-170px) rotateZ(90deg); }
    .box li:nth-child(4) img {
      transform: rotateZ(-90deg); }
  .box li:nth-child(5) {
    transform: translateY(-170px) rotateZ(120deg); }
    .box li:nth-child(5) img {
      transform: rotateZ(-120deg); }
  .box li:nth-child(6) {
    transform: translateY(-170px) rotateZ(150deg); }
    .box li:nth-child(6) img {
      transform: rotateZ(-150deg); }
  .box li:nth-child(7) {
    transform: translateY(-170px) rotateZ(180deg); }
    .box li:nth-child(7) img {
      transform: rotateZ(-180deg); }
  .box li:nth-child(8) {
    transform: translateY(-170px) rotateZ(210deg); }
    .box li:nth-child(8) img {
      transform: rotateZ(-210deg); }
  .box li:nth-child(9) {
    transform: translateY(-170px) rotateZ(240deg); }
    .box li:nth-child(9) img {
      transform: rotateZ(-240deg); }
  .box li:nth-child(10) {
    transform: translateY(-170px) rotateZ(270deg); }
    .box li:nth-child(10) img {
      transform: rotateZ(-270deg); }
  .box li:nth-child(11) {
    transform: translateY(-170px) rotateZ(300deg); }
    .box li:nth-child(11) img {
      transform: rotateZ(-300deg); }
  .box li:nth-child(12) {
    transform: translateY(-170px) rotateZ(330deg); }
    .box li:nth-child(12) img {
      transform: rotateZ(-330deg); }

.box ul {
  animation: MoTianLun 50s infinite linear; }
.box li > span, .box ul li > span {
  animation: MoTianLun 50s infinite linear reverse; }

@keyframes MoTianLun {
  0% {
    transform: rotateZ(0); }
  100% {
    transform: rotateZ(360deg); } }

网页上的应用

如某个培训机构的页面某一板块:

CSS3干货15:旋转摩天轮

百度 CSS摩天轮效果,全是一个特效,一个模子。

CSS3干货15:旋转摩天轮

今天开始,有第二个了~!!

 

上一篇:html span从上往下,从左往右排序


下一篇:Java爬虫(Jsoup与WebDriver)