CSS

CSS机械齿轮Loading,爱的魔力转圈圈

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

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

干啥玩意?这节是计算机课,不是音乐课。

确定不是机械课?

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

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 动画 语法等

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

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

源码下载地址

资源下载价格1立即支付    升级VIP后免费升级VIP
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(339)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注