loading加载齿轮旋转动画------css3源码

最新推荐文章于 2024-06-20 15:39:54 发布
最新推荐文章于 2024-06-20 15:39:54 发布
阅读量783 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhr0322/article/details/102735427
版权

在这里插入图片描述

loading加载齿轮旋转动画css3源码

最近项目中的动画效果有点low 所以恶补了一下css3决定自己手写一个

当然了 要是对大家有帮助的话，记得关注点赞啊！！

废话少说，开整

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3网页齿轮动画加载Loading代码</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>
<br><br><br><br><br><br><br><br><br>
<div class='loader'>
  <div class='loader_overlay'></div>
  <div class='loader_cogs'>
    <div class='loader_cogs__top'>
      <div class='top_part'></div>
      <div class='top_part'></div>
      <div class='top_part'></div>
      <div class='top_hole'></div>
    </div>
    <div class='loader_cogs__left'>
      <div class='left_part'></div>
      <div class='left_part'></div>
      <div class='left_part'></div>
      <div class='left_hole'></div>
    </div>
    <div class='loader_cogs__bottom'>
      <div class='bottom_part'></div>
      <div class='bottom_part'></div>
      <div class='bottom_part'></div>
      <div class='bottom_hole'></div>
    </div>
    <p>loading</p>
  </div>
</div>
</body>
</html>

激动人心的时刻来了---------当当当当 ------css登场

@charset "utf-8";

/*主要CSS*/
body { height: 100vh; font-family: "微软雅黑"; text-align: center; overflow: hidden; }
body h1 {
  text-transform: uppercase;
  font-size: 30px;
  color: #576e81;
  margin: 30px 0px 0px 0px;
}
body h2 {
  font-weight: normal;
  font-size: 18px;
  color: #F98DB9;
  margin: 10px 0px 0px 0px;
}
body p {
  margin: 0 auto;
}
body .loader {
  height: 250px;
  position: relative;
  margin: auto;
  width: 400px;
  z-index:10;
}
body .loader_overlay {
  width: 150px;
  height: 150px;
  background: transparent;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs {
  z-index: -2;
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__top {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
          transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
          animation: rotate 10s infinite linear;
}
body .loader_cogs__top div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__top div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__top div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__top div.top_part {
  width: 100px;
  border-radius: 10px;
  position: absolute;
  height: 100px;
  background: #f98db9;
}
body .loader_cogs__top div.top_hole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__left {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
          transform-origin: 40px 40px;
  -webkit-animation: rotate_left 10s .1s infinite reverse linear;
          animation: rotate_left 10s .1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
body .loader_cogs__left div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__left div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__left div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__left div.left_part {
  width: 80px;
  border-radius: 6px;
  position: absolute;
  height: 80px;
  background: #97ddff;
}
body .loader_cogs__left div.left_hole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .loader_cogs__bottom {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
          transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s .4s infinite linear;
          animation: rotate_left 10.2s .4s infinite linear;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
body .loader_cogs__bottom div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .loader_cogs__bottom div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .loader_cogs__bottom div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .loader_cogs__bottom div.bottom_part {
  width: 60px;
  border-radius: 5px;
  position: absolute;
  height: 60px;
  background: #ffcd66;
}
body .loader_cogs__bottom div.bottom_hole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Animations */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}

哦，对了 虽然直接粘贴就可以了 但是记得css样式写到css文件里边去，再到html里边引入一下！！！

拾-伍
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3小球环形旋转Loading动画.zip
07-04
CSS3小球环形旋转Loading动画是一款非常欢乐的CSS3 Loading动画，Loading动画由4个旋转的小球组成，旋转时呈现类3D的效果，我们很乐意叫它2.5d。
css3实现点圈旋转的loading效果
DreamFJ的博客
09-10 7178
test.html  &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta
loading图标动画
最新发布
lfYexun的博客
06-20 250
鼠标点击按钮时，按钮置灰，同时出现转圈的loading图标。
10种纯css3制作的loading效果和源码分享
qq_35515563的博客
05-02 4202
10种纯css3制作的loading效果和源码分享 效果一： loading-01 body { text-align: center; overflow: hidden; padding: 50px; } .csshub-loader{ position: relative; width: 80px; height: 80px;
网页加载中动态旋转动画CSS3特效代码
08-07
网页加载中动态旋转动画CSS3特效代码下载。一套css3旋转加载效果。
CSS3虫虫旋转Loading加载特效.zip
07-04
CSS3虫虫旋转Loading加载特效是一款纯CSS3制作的可爱卡通的loading图标加载动画。
css3 loading旋转动画js特效
ICode联盟
05-10 222
下载地址 css3 loading旋转动画特效，中间的字母O用旋转动画表示。 dd:
css3实现的可爱齿轮loading加载动画特效源码.zip
07-03
css3实现的可爱齿轮loading加载动画特效源码是一段基于css3实现的非常可以的齿轮动态loading加载效果代码，可以使页面立马生动起来的点睛动画，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
css3实现的可爱齿轮loading加载动画特效特效代码
03-20
css3实现的可爱齿轮loading加载动画特效源码是一段基于css3实现的非常可以的齿轮动态loading加载效果代码，可以使页面立马生动起来的点睛动画，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非
CSS3实现齿轮转动动画特效特效代码
03-20
CSS3实现齿轮转动动画特效 是一款CSS3结合图片实现的机械齿轮连接转动的CSS3特效代码。
CSS3圆环旋转加载loading动画特效
06-11
这是一款简单好看的CSS3圆环旋转加载loading动画特效，纯CSS3实现多层圆环页面加载动画效果。
CSS3实现齿轮转动动画特效
04-04
这是一款利用纯CSS3实现的齿轮转动动画特效，实验由多个齿轮组合在一起，主动轮转动后可以带动其他从动轮转动，从而将重物吊起。这个过程没有利用JS，而是利用纯CSS3实现，效果很棒。转动效果非常逼真，是一款非常优秀的特效源码。建议使用支持HTML5的火狐或谷歌等浏览器预览本实例源码。
转圈动画，loading
08-12
加载转圈等待效果，自定义图片。loading Animation 转圈动画 等待 加载
html5+css3齿轮滚动动画代码
06-12
html5+css3齿轮滚动动画代码是一款使用move.js插件制作的网页齿轮动画特效。
css3 实现加载中loading 转圈圈效果
m0_47668952的博客
03-29 764
【代码】css3 实现加载中loading 转圈圈效果。
用CSS3实现loading动画效果
weixin_43124082的博客
09-03 903
看这里
html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画
weixin_39950083的博客
06-04 321
CSS语言：CSSSCSS确定#gearwheel-a {height: 400px;width: 400px;border-radius: 50% 50%;background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradie...
CSS机械齿轮Loading，爱的魔力转圈圈
web秀
08-20 256
前言 “爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见…”，嗨起来，小伙伴们，跟我一起来！ 干啥玩意？这节是计算机课，不是音乐课。 确定不是机械课？ 额，差不太多吧，总之就是玩儿个轮子。 看图，怎么都是机械课啊，但是我们本次课程，只需要将其效果用HTML + CSS实现，所以还是计算机课，想上音乐课、机械课的可以先离开一下。 下面回归正题，对示例讲解 先来个轮子 大家肯定想，齿轮的锯齿如何实现呢？ 其实很简单就可以画出来，大家看下方代码 <div id="loadin
css3 loading效果-示例1
Alex_717的博客
10-08 359
效果预览：   HTML: &lt;div id="loading"&gt; &lt;span class="bounce bounce1"&gt;&lt;/span&gt; &lt;span class="bounce bounce2"&gt;&lt;/span&gt; &lt;span class="bounce
U-Boot启动解析：两阶段详解
3. **将内核从Flash读取到RAM中**：这一过程称为“bootloader kernel loading”，U-Boot会从非易失性存储（如NAND Flash或SPI Flash）中读取操作系统的映像，并将其加载到RAM中的预定位置。 4. **为内核设置启动参数...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值