CSS3 实现的加载动画


Posted in HTML / CSS onDecember 07, 2020

实现效果

CSS3 实现的加载动画

实现代码

<h1>三水点靠木</h1>
<h3>JB51.net</h3>

<div class='loader loader1'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader2'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader3'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader4'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS3

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    border-top-color: rgba(0, 0, 255, 0.5);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
}
@keyframes rotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    border-top-color: rgba(0, 0, 255, 0.5);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
}
* {
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  padding-bottom: 100px;
}

h1, h3 {
  display: block;
  margin: 0px auto;
  text-align: center;
  font-family: 'Tahoma';
  font-weight: lighter;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 1.5px;
}

h1 {
  margin: 50px auto;
}

.loader {
  position: relative;
  margin: 75px auto;
  width: 150px;
  height: 150px;
  display: block;
  overflow: hidden;
}
.loader div {
  height: 100%;
}

/* loader 1 */
.loader1, .loader1 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 255, 0.5);
}

/*loader 2  */
.loader2, .loader2 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 255, 0.5);
  border-left-color: rgba(0, 0, 0, 0.5);
  border-right-color: rgba(0, 0, 0, 0.5);
}

/*loader 3  */
.loader3, .loader3 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-left-color: rgba(0, 0, 255, 0.5);
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
          animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

/* loader 4 */
.loader4, .loader4 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-radius: 50%;
  padding: 4px;
  -webkit-animation: rotate2 4s infinite linear;
          animation: rotate2 4s infinite linear;
}

div:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.loader, .loader * {
  will-change: transform;
}

以上就是CSS3 实现的加载动画的详细内容,更多关于CSS3 加载动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css3动画效果小结(推荐)
Jul 25 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 #HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 #HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 #HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
You might like
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python用SSH连接到网络设备
2021/02/18 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
公司董事长职责
2013/12/12 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
安全承诺书格式
2014/05/21 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Go 语言中 20 个占位符的整理
2021/10/16 Golang