3.loading----圆+切换旋转角度+js

最新推荐文章于 2020-12-07 10:03:31 发布
最新推荐文章于 2020-12-07 10:03:31 发布
阅读量235 收藏
点赞数
分类专栏： DIV特效 文章标签： DIV特效 CSS特效 前端特效 Animation js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42779222/article/details/99631495
版权

1.由“2.loading----圆+各种角度旋转”的基础上继续扩展一下，用js来动态的设置animation，来切换效果，具体是：120度动画完（3个）、接着90度动画（4个）、接着60度动画（6个）、最后再45度动画（8个），效果图如下所示：

在这里插入图片描述

2.HTML代码：

<div class="loading">
    <div class="text">Loading....</div>
    <div class="wrapper">
      <div id="circle1" class="circlesup1">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle2" class="circlesup2">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle3" class="circlesup3">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle4" class="circlesup4">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle5" class="circlesup5">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle6" class="circlesup6">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle7" class="circlesup7">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle8" class="circlesup8">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </div>

3.思路：

  1. 每次做动画之前，先清空.circleup的旋转角度，如果没有旋转角度，那么他们会重合在一起，这样是看不出差别的，所以每次我们只需要用js控制需要做动画的.circleup给予他们不同的旋转角度，就可以实现旋转效果。
  2. 切换动画，则利用setTimeout和setInterval来实现，比如首先一开始做旋转120度的动画，然后用setTimeout控制2s后做90度的动画，接着用setTimeout控制4s后开始60度的动画，接着用setTimeout控制6s后开始45度的动画；最后用setInterval来循环上面的步骤；

4.具题的所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
      font-family: 'Open Sans';
      overflow: hidden;
      background: #403833;
      font-weight: 100;
      color: #f2f2f2;
      font-size: 100%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .loading{
      position: relative;
      width: 400px;
      height: 400px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      line-height: 400px;
    }
    .text{
      animation: scaleSmall 2s infinite;
    }
    .wrapper{
      width: 100%;
      height: 100%;
    }
    .circlesup1{
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .circlesup2{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
      transform-origin: center center;
    }
    .circlesup3{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circlesup4{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circlesup5{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circlesup6{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circlesup7{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circlesup8{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
    }
    .circle{
      position: absolute;
      left: 25%;
      top: 0;
      width: 50%;
      height: 50%;
      transform-origin: 50% 50%;
      animation: test 2s infinite;
    }
    .circle:nth-child(1){
      z-index: 5;
    }
    .circle:nth-child(2){
      animation: test 2s .125s infinite;
    }
    .circle:nth-child(3){
      animation: test 2s .25s infinite;
    }
    .circle:nth-child(4){
      animation: test 2s .375s infinite;
    }
    .circle:nth-child(5){
      animation: test 2s .5s infinite;
    }
    .circle:after{
      content: "";
      position: absolute;
      width: 20%;
      height: 20%;
      left: 40%;
      bottom: -10%;
      border-radius: 50%;
    }
    .circle:nth-child(1):after{
      background: #13A3A5;
    }
    .circle:nth-child(2):after{
      background: #56bebf;
      transform: scale(0.8,0.8);
    }
    .circle:nth-child(3):after{
      background: #ffa489;
      transform: scale(0.6,0.6);
    }
    .circle:nth-child(4):after{
      background: #ff6d37;
      transform: scale(0.4,0.4);
    }
    .circle:nth-child(5):after{
      background: #DB2F00;
      transform: scale(0.2,0.2);
    }
    @keyframes test {
      0% {
        transform: rotate(0deg);
      }
      5% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
      }
      70% {
        transform: rotate(360deg);
        animation-timing-function: ease-in;
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes scaleSmall {
      0%{
        transform: scale(0);
      }
      50%{
        transform: scale(1);
      }
      100%{
        transform: scale(0);
      }
    }
  </style>
</head>
<body>
  <div class="loading">
    <div class="text">Loading....</div>
    <div class="wrapper">
      <div id="circle1" class="circlesup1">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle2" class="circlesup2">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle3" class="circlesup3">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle4" class="circlesup4">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle5" class="circlesup5">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle6" class="circlesup6">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle7" class="circlesup7">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="circle8" class="circlesup8">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </div>
</body>
<script>
  <!--下面cssTransform这个函数是用来设置transform的-->
  function cssTransform(el,attr,val){
    if(!el.tranform){//判断只在无el.tranform属性时新创建el.tranform
      el.tranform={}//为元素el设置一个属性，为一个空对象
    }
    if(arguments.length>2){//判断是否有传入val，有则执行封装函数设置transform值的功能
      el.tranform[attr]=val;
      var sVal="";//用于储存多个transform值

      for( var attrs in el.tranform ){
        switch(attrs){
          case "rotate":
          case "rotateX":
          case "rotateY":
          case "rotateZ":
          case "rotate":
          case "skewX":
          case "skewY":
            sVal+=attrs+"("+el.tranform[attrs]+"deg) ";//注意此处的空格要加上
            break;

          case "translateX":
          case "translateY":
          case "translateZ":
            sVal+=attrs+"("+el.tranform[attrs]+"px) ";//注意单位的变化
            break;

          case "scale":
          case "scaleX":
          case "scaleY":
            sVal+=attrs+"("+el.tranform[attrs]+") ";//注意单位的变化
            break;
        }
      }
      el.style.webkitTransform=el.style.transform=sVal;
    }else{//判断是否有传入val，无则执行封装函数获取transform值的功能
      var val=el.tranform[attr];//获取由该函数设置的transform值的元素的获取transform值
      if(typeof val == "undefined"){//如果想要获取默认值的话
        if(attr=="scale" || attr=="scaleX" || attr=="scaleY"){
          val=1;
        }else{
          val=0;
        }
      }
      return val;
    }

  }
  window.onload = function () {
    // 不能设置transform为空，不然之后无法获取器相应的值
    let wrapper = document.getElementsByClassName('wrapper')
    let circleList = wrapper[0].children
    function deg(circleList, rotate){
      for (let i = 0; i<circleList.length;i++){
        // cssTransform(circleList[i],"rotate",0);
        circleList[i].style.transform = "rotate(0deg)"
    }
      for (var i = 0; i < rotate.length; i++) {
        let num = i * rotate.deg;
        // cssTransform(circleList[i],"rotate",num);
        circleList[i].style.transform = "rotate("+num+"deg)"
      }
    }
    deg(circleList,{length:3, deg:120})
    setTimeout(function () {
      deg(circleList,{length:4, deg:90})
    },2000)
    setTimeout(function () {
      deg(circleList,{length:6, deg:60})
    },4000)
    setTimeout(function () {
      deg(circleList,{length:8, deg:45})
    },6000)
    setInterval(function () {
      console.log('定时器开启');
      deg(circleList,{length:3, deg:120})
      setTimeout(function () {
        deg(circleList,{length:4, deg:90})
      },2000)
      setTimeout(function () {
        deg(circleList,{length:6, deg:60})
      },4000)
      setTimeout(function () {
        deg(circleList,{length:8, deg:45})
      },6000)
    },8000)
  }
</script>
</html>
Summer丶羽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
svg实现环形loading加载
土匪丁的博客
03-03 798
<circle> 标签可用来创建一个圆 <svg> <circle cx="100" cy="100" r="40" stroke="#ffa940" stroke-width="8" fill="none" /> </svg> 首先实现一个圆环效果，cx,cy表示圆心坐标，r表示圆半径，stroke表示边框可以理解为border，stroke-width表示边框宽度，fill填充颜色。 ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
weixin_30863465的博客
06-10 738
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件。该loading特效使用:before和:after伪元素来制作动画d的不同部分，然后给他们设置absolute定位和CSS transformations来创建动画效果。制作方法对于制作一个水平的loading进度条并不是十分的困难，但是要制作一个平滑运动的圆形进度条就有一点难度了。你要弄明白它们是如何工作的，先来看一下水平进度条...
Markdown.sublime-syntax
01-10
解决Sublime TEXT 3 安装 Markdown Editing 插件 出现错误 "Error loading syntax file "Packages/Markdown/Markdown.sublime-syntax":Unable to read Packages/Markdown/Markdown.sublime-syntax"
js旋转立方体 根据鼠标的移动，做相应的变化
11-28
js做的可以旋转的立方体。可以根据鼠标的移动，做相应的变化。效果超炫丽
jquery圆形旋转特效.rar
07-05
jquery圆形旋转特效
drag-loading.js
01-14
drag-loading.js
js-loading-overlay：轻松漂亮地显示应用程序的加载叠加层
01-30
JS加载叠加层 在您的应用程序中轻松而精美地显示加载叠加。 使用超棒微调器来JS加载叠加层。 它包含52个微调框，您可以选择。 产品特点 整页加载叠加。 能够显示整页加载叠加。 正在将叠加层加载到容器中。 能够显示集装箱内的装载覆盖物 锁定滚动。 能够在加载叠加活动期间锁定滚动。 文献资料 有关安装说明和深入使用的详细信息，请参阅。 如何安装 NPM npm install --save js-loading-overlay Yarn yarn add js-loading-overlay Use without NPM or Yarn import 'js-loading-overlay' JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'}); 如何使用 import 'js-loading-overlay' JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'}); or <script src="js-loading-overlay.min.js
实现10种简单的loading效果
欢迎来到iceseasyh的博客
10-20 2424
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .loading{ width: 80px; .
html css3各类加载中的loading动画效果
Yesterday_Tomorrow的博客
12-07 883
效果一： 一、HTML <div class="loader">Loading...</div> 二、CSS /*绿色背景*/ body { background:#4ea980; margin:50px; } /*纯白色圈*/ .loader { text-indent: -9999em; position: relative; width: 200px; height: 200px; box-shadow: inset ...
JS弧度转角度
热门推荐
hero的专栏
10-10 1万+
<!DOCTYPE HTML> <html><body> <script> //弧度 = π/180×角度 //角度 = 180/π×弧度 var hd = Math.PI / 180 * 30 ; var jd = 180/Math.PI * hd; //角度 = 180/Math.PI * Math.asin(1/2) console.log(Math
旋转的loading效果
06-15
旋转的loading效果
Canvas制作圆形进度条Loading效果
05-19
Canvas制作圆形进度条Loading效果
JS.loading-picture.rar_js loading
09-24
图片载入效果,用于图片上传过程中的等待界面。
Web-前端html+css从入门到精通 144. loading加载动画效果.zip
05-23
Web-前端html+css从入门到精通 144. loading加载动画效果.zip
1.花瓣特效----旋转效果
qq_42779222的博客
08-12 1933
1.花瓣特效图： 2.html的布局： <div class="raote-an"><!--背景区域--> <div class="container"><!--旋转的区域，内部div用来当花瓣的--> <div class="one"></div> <div class="two"&g...
2.CSS几何旋转----正六边形
qq_42779222的博客
08-18 1212
1.效果图：
4.Btn、Div特效---边框特效
qq_42779222的博客
09-18 977
1.效果图（具体代码再最下面）： 2.上面一些效果的思路： 3.具体代码：GitHub链接
3.花瓣特效----js+旋转+位移
qq_42779222的博客
08-13 685
1.用CSS写花瓣特效感觉写得不够灵活，很多地方都要自己计算位置，所以想用js来动态计算，我们只需要提供半径、花瓣的宽度、高度等，就可以来修改动画。 2.思路： 1.需要先知道外部容器的宽度wrapper_w和高度wrapper_h，接着获取花瓣的宽度petal_w和高度petal_h，然后将8个花瓣的div定位到外部容器的中心（为了之后的方便旋转），中心的left为（wrapper_w-peta...
2.花瓣特效----旋转+位移
qq_42779222的博客
08-12 524
1.html的布局： <div class="raote-an"><!--背景区域--> <div class="container"><!--旋转的区域，内部div用来当花瓣的--> <div class="one"></div> <div class="two"></div...
Vue.js的v-loading指令
最新发布
06-09
Vue.js的v-loading指令是一种自定义指令，用于在异步操作期间显示加载状态。通过使用v-loading指令，我们可以轻松地在Vue.js应用程序中实现加载状态的显示和隐藏，提升用户体验。 v-loading指令的原理是，在指令绑定的元素上添加一个遮罩层，并在遮罩层上显示加载状态的UI。当异步操作完成时，遮罩层和加载状态UI会被移除。 下面是一个简单的v-loading指令的实现： ```javascript Vue.directive('loading', { bind: function (el, binding) { const mask = document.createElement('div') mask.className = 'loading-mask' const spinner = document.createElement('div') spinner.className = 'loading-spinner' mask.appendChild(spinner) el.appendChild(mask) el.__loading__ = mask if (binding.value) { el.classList.add('relative') mask.classList.add('show') } else { el.classList.remove('relative') mask.classList.remove('show') } }, update: function (el, binding) { if (binding.value) { el.classList.add('relative') el.__loading__.classList.add('show') } else { el.classList.remove('relative') el.__loading__.classList.remove('show') } }, unbind: function (el) { el.removeChild(el.__loading__) delete el.__loading__ } }) ``` 这个指令会为绑定它的元素添加一个遮罩层和加载状态UI，并在元素的`v-loading`属性值发生变化时显示或隐藏遮罩层和加载状态UI。我们可以在模板中使用这个指令来显示加载状态，例如： ```html <div v-loading="loading"> <!-- 异步操作的内容 --> </div> ``` 这个指令的样式可以根据项目需求自行修改，下面是一个简单的CSS样式示例： ```css .loading-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: none; } .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid #fff; border-top-color: transparent; border-radius: 50%; width: 32px; height: 32px; animation: spin .8s linear infinite; } .show { display: block; } .relative { position: relative; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值