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的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
完善的jquery处理机制
2016/02/21 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
深入理解vue Render函数
2017/07/19 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
js仿360开机效果
2019/12/26 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
新浪网技术部笔试题
2016/08/26 面试题
社区灵活就业证明
2014/11/03 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python