css background 旋转_CSS机械齿轮Loading，爱的魔力转圈圈

前言

“爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见...”，嗨起来，小伙伴们，跟我一起来！

干啥玩意？这节是计算机课，不是音乐课。

确定不是机械课？

额，差不太多吧，总之就是玩儿个轮子。

看图，怎么都是机械课啊，但是我们本次课程，只需要将其效果用HTML + CSS实现，所以还是计算机课，想上音乐课、机械课的可以先离开一下。

下面回归正题，对示例讲解

先来个轮子

大家肯定想，齿轮的锯齿如何实现呢？

其实很简单就可以画出来，大家看下方代码

<div id="loading">
  <div class="gear1">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

添加CSS

#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#loading .gear1{
  position: relative;
  width: 100px;
  height: 100px;
}
#loading .gear1> div{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
}
#loading .gear1 div:first-child{
  background: pink;
  transform: rotate(120deg);
}
#loading .gear1 div:nth-child(2){
  background: blueviolet;
  transform: rotate(240deg);
}
#loading .gear1 div:nth-child(3){
  background: greenyellow;
}

解析：

1、简单的用一个元素包裹3个宽高都是100px的正方形子元素

2、子元素用绝对定位，并分别旋转0°、120°、240°（360° / 3个元素）

// transform: rotate 元素旋转
transform: rotate(120deg);

3、正方形有4只角，3个正方形就是12只角（12个锯齿）

4、我们可以设置矩形角是圆角，锯齿就没有那么尖锐

#loading .gear1> div{
  border-radius: 10px;
}

5、颜色还是都用通一种颜色，这样效果更好

#loading .gear1> div{
  ...
  background: pink;
}
#loading .gear1 div:first-child{
  transform: rotate(120deg);
}
#loading .gear1 div:nth-child(2){
  transform: rotate(240deg);
}

接下来，掏空他的身体（哇，你好污...）

中空齿轮

直接中伪类，水平垂直居中即可

#loading .gear1:after{
  position: absolute;
  content: '';
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

旋转吧，齿轮

@keyframes rotate{
  from{
    transform:rotate(0deg)
  }
  to{
    transform:rotate(360deg)
  }
}
#loading .gear1{
  ...
  animation: rotate 5s infinite linear
}

解析： 执行 名字叫 rotate 动画规则，开始旋转角度是 0，结束时旋转角度是 360，5s转一圈，infinite永久执行，linear匀速执行

copy轮子

复制上方的轮子，调整他们的位置，蓝色带动粉丝，粉色带动黄色，注意他们旋转方向

小结

不要就想着掏空他的身体好吧，通过本章节，你都学到了什么？

1、万物皆可盘，齿轮用简单的多个元素旋转错位构建transform:rotate(deg)

2、CSS 伪类运用

3、html元素水平垂直居中

4、animation 动画 语法等

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。

谢谢大家一直以来的支持。

CSS机械齿轮Loading，爱的魔力转圈圈 _ Web秀​www.javanx.cn