CSS机械齿轮Loading，爱的魔力转圈圈
前言
“爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见...”，嗨起来，小伙伴们，跟我一起来！
干啥玩意？这节是计算机课，不是音乐课。
确定不是机械课？
额，差不太多吧，总之就是玩儿个轮子。
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;
}
CSS机械齿轮Loading，爱的魔力转圈圈
解析：
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;
}
CSS机械齿轮Loading，爱的魔力转圈圈
5、颜色还是都用通一种颜色，这样效果更好
#loading .gear1> div{
...
background: pink;
}
#loading .gear1 div:first-child{
transform: rotate(120deg);
}
#loading .gear1 div:nth-child(2){
transform: rotate(240deg);
}CSS机械齿轮Loading，爱的魔力转圈圈
接下来，掏空他的身体（哇，你好污...）
中空齿轮
直接中伪类，水平垂直居中即可
#loading .gear1:after{
position: absolute;
content: '';
background: #fff;
width: 50px;
height: 50px;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS机械齿轮Loading，爱的魔力转圈圈
旋转吧，齿轮
@keyframes rotate{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
#loading .gear1{
...
animation: rotate 5s infinite linear
}
CSS机械齿轮Loading，爱的魔力转圈圈
解析：
执行 名字叫 rotate 动画规则，开始旋转角度是 0，结束时旋转角度是 360，5s转一圈，infinite永久执行，linear匀速执行
copy轮子
复制上方的轮子，调整他们的位置，蓝色带动粉丝，粉色带动黄色，注意他们旋转方向
CSS机械齿轮Loading，爱的魔力转圈圈
小结
不要就想着掏空他的身体好吧，通过本章节，你都学到了什么？
1、万物皆可盘，齿轮用简单的多个元素旋转错位构建transform:rotate(deg)
2、CSS 伪类运用
3、html元素水平垂直居中
4、animation 动画 语法等
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。
谢谢大家一直以来的支持。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录