上下跳动的小球,用css叁写三个守望先锋的loading动画

(-壹)写在前方

  
笔者用的是chrome4九,那个idea是自己在stackoverflow上答应难点时见到了,多谢那位同行,加深了我对点不清技巧点的领会,方今刚到香港市,艰苦了1两日,在持续的生活里,会被布署面试,学习安插只得按职业流走了,做完这些要看2个尤其酷的成效,青睐动!

HTML伍CSS叁特效-上下跳动的小球-遁地沙尘暴,html五css3特效

(-一)写在前头

  
笔者用的是chrome4九,那几个idea是自家在stackoverflow上答应难点时观察了,多谢那位同行,加深了自家对许多才具点的接头,近来刚到首都,忙绿了一二日,在持续的光阴里,会被安插面试,学习安插只得按工作流走了,做完那个要看三个尤其酷的作用,青眼动!

澳门葡京 1

(0)效果演示

 

(-壹)写在前头

  
笔者用的是chrome4玖,那一个idea是自己在stackoverflow上答应难题时观望了,感激那位同行,加深了本身对大多本领点的掌握,近日刚到首都,辛劳了一二日,在此起彼伏的日子里,会被安插面试,学习安插只得按专门的学业流走了,做完这么些要看四个尤其酷的效益,好激动!

(0)效果演示

 

作者是在前端网看到的作用,点击那里进入,自身看完源码后实现了1回,以下介绍具体步骤:

(一)完成方案

动画片效果都是用animation做的

(0)效果演示

 

(一)达成方案

动画效果都以用animation做的

观测效果,能够将其分成五个圆和里面包车型地铁logo,所以轻易分为3有些

(二)知识点详解

(一)达成方案

动画片效果都以用animation做的

(2)知识点详解

<div > <div > </div> <div > </div> <div > </div></div>

上下跳动的小球,用css叁写三个守望先锋的loading动画。a. border-radius:40px;  

当div的长高都以80px的时候,div是二个圆形,其实长高都以60px的时候也是圆型,同理都以40、30也是圆型,当然案例中从不应用那种方法。具体贯彻在代码中表明

(2)知识点详解

a. border-radius:40px;  

当div的长高都以80px的时候,div是二个圆形,其实长高都以60px的时候也是圆型,同理都以40、30也是圆型,当然案例中一贯不行使这种措施。具体实以往代码中验证

观察外面包车型地铁半圆形,肯定是用clip属性来实现了,分明要用5回,所以中间能够再分为多个部分,再用before和after四个伪成分,注意接纳clip必须是用相对定位成分,具体clip里面的值的话能够渐渐调了,若是您是二个游戏迷的话,不仿完毕2个和游戏里平等的,几个月前,当作者的敌人圈被那款游戏刷屏的时候,笔者也想娱乐的,可是当自家展开官方网址的时候

b. position:absolute;

当div使用此属性时,margin:0
auto是对事情没有什么益处的,小球使用了这一个天性,他的水平居中的完成格局在代码中证实

a. border-radius:40px;  

当div的长高都以80px的时候,div是一个圆形,其实长高都以60px的时候也是圆型,同理都以40、30也是圆型,当然案例中从未运用这种形式。具体得以达成在代码中证实

b. position:absolute;

当div使用此属性时,margin:0
auto是对事情未有什么益处的,小球使用了那些本性,他的水准居中的达成格局在代码中证实

澳门葡京 2QQ截图20160816205229.png澳门葡京 3

c. animation:down 1.5s infinite alternate;

I.一.5s
是卡通的持续时间,因为延迟时间出现在持续时间的前面,所以只出现三个带s的参数是持续时间。

II.那里的alternate是指反向播放动画,比方说三个卡通的帧如下

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

正向播放是from-九伍-to,反向播放to-玖伍%-from

b. position:absolute;

当div使用此属性时,margin:0
auto是无济于事的,小球使用了那性情子,他的品位居中的达成格局在代码中验证

c. animation:down 1.5s infinite alternate;

I.一.五s
是卡通的持续时间,因为延迟时间出现在持续时间的末端,所以只现出1个带s的参数是持续时间。

II.那里的alternate是指反向播放动画,举个例子说三个动画片的帧如下

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

正向播放是from-玖5-to,反向播放to-九5%-from

自家竟无言以对,即便自个儿很帮助正版,不过毕竟没钱。把外圆的相干样式丢进去,就足以完成效益了,那么些首要也就在clip了

d. @keyframes down{95%{…}}

假使对应animate:down 1.5s;

动画片在进行到玖伍%就到达了最后状态,剩余伍%的岁月会用在回到起先状态。

c. animation:down 1.5s infinite alternate;

I.1.伍s
是卡通片的持续时间,因为延迟时间出现在持续时间的末尾,所以只出现3个带s的参数是持续时间。

II.那里的alternate是指反向播放动画,比如说1个卡通的帧如下

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

正向播放是from-九五-to,反向播放to-95%-from

d. @keyframes down{95%{…}}

设若对应animate:down 1.伍s;

动画片在进行到九伍%就到达了最终状态,剩余伍%的时光会用在回去初叶状态。

<div > <div > <div ></div> <div ></div> </div> <div > </div> <div > </div></div>

* { margin: 0; padding: 0;}html { height: 100%; background: #282828;}.overwatch-container { width: 232px; margin: 50px auto; position: relative;}.out-ring1 { height: 220px; width: 220px; position: absolute; top: 6px; left: 6px;}.out-ring1::before, .out-ring1::after { content: ""; height: 220px; width: 220px; border-radius: 50%; position: absolute; top: -6px; left: -6px; border: 6px solid rgba(161, 164, 176, 0.5);}.out-ring1::before { clip: rect(60px, 232px, 172px, 100px); transform: rotate;}.out-ring1::after { clip: rect(80px, 232px, 152px, 100px); transform: rotate;}.out-ring2 { position: absolute; top: 6px; left: 6px;}.out-ring2::before, .out-ring2::after { content: ""; height: 220px; width: 220px; border-radius: 50%; position: absolute; top: -6px; left: -6px; border: 6px solid rgba(161, 164, 176, 0.5);}.out-ring2::before { clip: rect(105px, 232px, 127px, 100px);}.out-ring2::after { clip: rect(112px, 232px, 120px, 100px);}

(三)代码加解释

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      margin:0px auto;

      top:100px;

      width:80px;

      height:80px;

      background-color:red;

      border-radius:40px;            

      position:absolute;

      left:160px;

      animation:down 1.5s infinite alternate;

}   

@keyframes down

{

      95%

      {

           width:15px;

           height:15px;

           border-radius:7.5px; /*管教div始终是个圆形*/

           top:300px;

           left:192.5px;/*保险小球始终水平居中*/

           background:blue;

      }

}

#frame

{

      width:400px;

      height:315px;

      margin:100px auto;

      border:1px red solid;

      position:relative;

}

#head

{

      width:400px;

      height:100px;

      text-align:center;

      font-size:40px;

      font-weight:bold;

      line-height:100px;

      background-image:-webkit-linear-gradient(90deg, #be1e1e,
#be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

/*后边小说有提到*/

      -webkit-background-clip: text;/*细分背景颜色,只在文字上出示*/

      -webkit-text-fill-color:transparent;/*文字填充为透明色*/

      background-size:100% 700%;    

/*后面小说有关联*/

      animation:bc 6s infinite;

}

@keyframes bc

{

      to

      {

           background-position:100% 100%;

/*前边小说有涉嫌*/

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”frame”>

           <div id=”head”>Animatiom</div>

           <div id=”lol”></div>

      </div>

</body>              

</html>                 

                        

                         

d. @keyframes down{95%{…}}

假诺对应animate:down 壹.五s;

动画在施行到玖五%就抵达了最后状态,剩余5%的日子会用在回到开端状态。

(三)代码加解释

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      margin:0px auto;

      top:100px;

      width:80px;

      height:80px;

      background-color:red;

      border-radius:40px;            

      position:absolute;

      left:160px;

      animation:down 1.5s infinite alternate;

}   

@keyframes down

{

      95%

      {

           width:15px;

           height:15px;

           border-radius:7.5px; /*保障div始终是个圆圈*/

           top:300px;

           left:192.5px;/*担保小球始终水平居中*/

           background:blue;

      }

}

#澳门葡京,frame

{

      width:400px;

      height:315px;

      margin:100px auto;

      border:1px red solid;

      position:relative;

}

#head

{

      width:400px;

      height:100px;

      text-align:center;

      font-size:40px;

      font-weight:bold;

      line-height:100px;

      background-image:-webkit-linear-gradient(90deg, #be1e1e,
#be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

/*前边文章有涉嫌*/

      -webkit-background-clip: text;/*划分背景颜色,只在文字上出示*/

      -webkit-text-fill-color:transparent;/*文字填充为透明色*/

      background-size:100% 700%;    

/*前边文章有涉嫌*/

      animation:bc 6s infinite;

}

@keyframes bc

{

      to

      {

           background-position:100% 100%;

/*前边文章有关联*/

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”frame”>

           <div id=”head”>Animatiom</div>

           <div id=”lol”></div>

      </div>

</body>              

</html>                 

                        

                         

因为内部的圆的侧重于动画效果,故先写logo,观察logo,能够知晓,那里看看那里一定要用到transform:rotate这些天性,logo中必然是三个大圆,别的一些能够透过方块落成,而最中间的局地能够用三角来落到实处,css画三角形使用border就足以,具体的rotate供给具体调

(三)代码加解释

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      margin:0px auto;

      top:100px;

      width:80px;

      height:80px;

      background-color:red;

      border-radius:40px;            

      position:absolute;

      left:160px;

      animation:down 1.5s infinite alternate;

}   

@keyframes down

{

      95%

      {

           width:15px;

           height:15px;

           border-radius:7.5px; /*保证div始终是个圆圈*/

           top:300px;

           left:192.5px;/*担保小球始终水平居中*/

           background:blue;

      }

}

#frame

{

      width:400px;

      height:315px;

      margin:100px auto;

      border:1px red solid;

      position:relative;

}

#head

{

      width:400px;

      height:100px;

      text-align:center;

      font-size:40px;

      font-weight:bold;

      line-height:100px;

      background-image:-webkit-linear-gradient(90deg, #be1e1e,
#be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

/*后面小说有关联*/

      -webkit-background-clip: text;/*分开背景颜色,只在文字上显得*/

      -webkit-text-fill-color:transparent;/*文字填充为透明色*/

      background-size:100% 700%;    

/*前边小说有关系*/

      animation:bc 6s infinite;

}

@keyframes bc

{

      to

      {

           background-position:100% 100%;

/*前面文章有提到*/

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”frame”>

           <div id=”head”>Animatiom</div>

           <div id=”lol”></div>

      </div>

</body>              

</html>                 

                        

                         

(-一)写在面前笔者用的是chrome4玖,这一个idea是自身在stackoverflow上答应难点时见到了,多谢那…

<div > <div > <div ></div> <div ></div> </div> <div > </div> <div > <div ></div> <div ></div> </div></div>

* { margin: 0; padding: 0;}html { height: 100%; background: #282828;}.overwatch-container { width: 232px; margin: 50px auto; position: relative;}.out-ring1 { height: 220px; width: 220px; position: absolute; top: 6px; left: 6px;}.out-ring1::before, .out-ring1::after { content: ""; height: 220px; width: 220px; border-radius: 50%; position: absolute; top: -6px; left: -6px; border: 6px solid rgba(161, 164, 176, 0.5);}.out-ring1::before { clip: rect(60px, 232px, 172px, 100px); transform: rotate;}.out-ring1::after { clip: rect(80px, 232px, 152px, 100px); transform: rotate;}.out-ring2 { position: absolute; top: 6px; left: 6px;}.out-ring2::before, .out-ring2::after { content: ""; height: 220px; width: 220px; border-radius: 50%; position: absolute; top: -6px; left: -6px; border: 6px solid rgba(161, 164, 176, 0.5);}.out-ring2::before { clip: rect(105px, 232px, 127px, 100px);}.out-ring2::after { clip: rect(112px, 232px, 120px, 100px);}.inner-img { width: 120px; height: 120px; border: 20px solid #B6B8C0; background: transparent; border-radius: 50%; position: absolute; left: 0; top: 0; margin: 36px;}.inner-img::before { content: ""; height: 20px; width: 66px; position: absolute; background: #B6B8C0; bottom: 0; left: 0; transform: rotate; transform-origin: left;}.inner-img::after { content: ""; height: 20px; width: 66px; position: absolute; background: #B6B8C0; bottom: 0; right: 0; transform: rotate; transform-origin: right;}.inner-img-shelter::before, .inner-img-shelter::after { content: ""; height: 4px; width: 21px; background: #282828; position: absolute; top: 15px;}.inner-img-shelter::before { left: -4px; transform: rotate; transform-origin: bottom right;}.inner-img-shelter::after { right: -4px; transform: rotate; transform-origin: bottom left;}.inner-img-triangle::before { content: ""; width: 0px; height: 0px; border-width: 0px 0px 50px 20px; border-left-color: transparent; border-bottom-color: #B6B8C0; border-style: solid; position: absolute; top: 20px; left: 34px;}.inner-img-triangle::after { content: ""; width: 0px; height: 0px; border-width: 0px 20px 50px 00px; border-right-color: transparent; border-bottom-color: #B6B8C0; border-style: solid; position: absolute; top: 20px; right: 34px;}

里圆的功力侧重于动画了,里面包车型客车效劳都以通过不停调度落成的,小编也是看的源代码,里面包车型大巴效率毕竟照旧基本的圈子loading加载动画,一般圆形的进程条大家得以行使方面提到的clip落成

澳门葡京 423333

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title> loading</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style> *{ margin:0; padding:0; } body{ width:220px; margin:20px auto; } .loading-container{ position:relative; } .loading{ width:200px; height:200px; border-radius: 50%; border:10px solid yellow; animation: loading 2s linear infinite; position:absolute; } .loading2{ width:200px; height:200px; border-radius:50%; border:10px solid yellow; position:absolute; transform: rotate; clip:rect(0px,0px,0px,0px); animation:loading2 2s linear infinite; } @keyframes loading{ 0%{ clip:rect(0px, 220px,0px,110px); } 50%{ clip:rect(0px,220px,220px,110px); } 100%{ clip:rect(0px,220px,220px,110px); } } @keyframes loading2{ 0%{ clip:rect(0px, 220px,0px,110px); } 50%{ clip:rect(0px, 220px,0px,110px); } 100%{ clip:rect(0px, 220px,220px,110px); } }</style></head><body> <div > <div ></div> <div ></div> </div></body></html>

假如因而js增添一些数字就愈加形象了

澳门葡京 52334.gif

<!DOCTYPE html><html><head><meta
charset=”utf-8″><meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″><title>
loading</title><meta name=”description” content=””><meta
name=”keywords” content=””><link href=””
rel=”stylesheet”><style>*{margin:0;padding:0;}body{width:220px;margin:20px
auto;}.loading-container{position:relative;}.loading{width:200px;height:200px;border-radius:
50%;border:10px solid yellow;animation: loading 2s linear
infinite;position:absolute;}.loading2{width:200px;height:200px;border-radius:50%;border:10px
solid yellow;position:absolute;transform:
rotate;clip:rect(0px,0px,0px,0px);animation:loading2 2s linear
infinite;}@keyframes loading{0%{clip:rect(0px,
220px,0px,110px);}50%{clip:rect(0px,220px,220px,110px);}100%{clip:rect(0px,220px,220px,110px);}}@keyframes
loading2{0%{clip:rect(0px, 220px,0px,110px);}50%{clip:rect(0px,
220px,0px,110px);}100%{clip:rect(0px,
220px,220px,110px);}}</style></head><body><div
><div ></div><div
></div></div><script>var
number=document.getElementById;function changeNumber(){var
text=number.innerText;var
newText=Number(text.replace;if(newText<100){newText++;}else{clearTimeout;}number.innerText=newText+”%”;var
timer=setTimeout(changeNumber,20);}changeNumber();</script></body></html>

使用clip的一个特点是过程中会出现棱角,这个可能不是我们想要的,我们可以使用border来代替,从而消除棱角

<!DOCTYPE html><html><head><meta
charset=”utf-8″><meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″><title>
loading2</title><meta name=”description” content=””><meta
name=”keywords” content=””><link href=””
rel=”stylesheet”><style>*{margin:0;padding:0;}body{width:220px;margin:20px
auto;}.loading-container{position:relative;}.loading{width:110px;height:220px;position:absolute;overflow:
hidden;}.loading-content{width:200px;height:200px;border:10px solid
yellow;border-radius:
50%;border-bottom-color:transparent;border-right-color:transparent;transform:rotate;animation:
loading 2s infinite
linear;}.loading2{width:110px;height:220px;position:absolute;overflow:
hidden;right:0;top:0;transform:rotate;}.loading2-content{width:200px;height:200px;border:10px
solid yellow;border-radius:
50%;border-bottom-color:transparent;border-right-color:transparent;transform:rotate;animation:
loading2 2s infinite
linear;}.number{width:220px;height:40px;position:absolute;top:90px;text-align:
center;font-size: 30px;font-weight:bold;}@keyframes
loading{0%{transform: rotate;}50%{transform: rotate;}100%{transform:
rotate;}}@keyframes loading2{0%{transform: rotate;}50%{transform:
rotate;}100%{transform:
rotate;}}</style></head><body><div ><div
><div ></div></div><div ><div
></div></div><div
>0%</div></div><script>var
number=document.getElementById;function changeNumber(){var
text=number.innerText;var
newText=Number(text.replace;if(newText<100){newText++;}else{clearTimeout;}number.innerText=newText+”%”;var
timer=setTimeout(changeNumber,20);}changeNumber();</script></body></html>

而守望先锋的效果也正是这个的延伸的微调,具体可以看源码####四、添加动画效果####这里的动画效果没有什么技巧,只是不断的rotate微调而已,具体情况可以参照源码

<div ><div ><div ></div><div
></div></div><div ><div ></div><div
><div ><div ></div></div></div><div
><div ><div ><div
></div></div></div><div ><div ><div
></div></div></div></div></div><div
><div ></div><div
></div></div></div>

  • {margin: 0;padding: 0;}html {height: 100%;background:
    #282828;}.overwatch-container {width: 232px;margin: 50px
    auto;position: relative;}.out-ring1 {height: 220px;width:
    220px;position: absolute;top: 6px;left: 6px;}.out-ring1::before,
    .out-ring1::after {content: “”;height: 220px;width:
    220px;border-radius: 50%;position: absolute;top: -6px;left:
    -6px;border: 6px solid rgba(161, 164, 176, 0.5);}.out-ring1::before
    {clip: rect(60px, 232px, 172px, 100px);transform: rotate;animation:
    out-ring1-before 3s cubic-bezier(0.34, 0.07, 0.68, 0.93)
    infinite}.out-ring1::after {clip: rect(80px, 232px, 152px,
    100px);transform: rotate;animation: out-ring1-after 3s linear
    infinite}@keyframes out-ring1-before {from {transform: rotate;}to
    {transform: rotate;}}@keyframes out-ring1-after {from {transform:
    rotate;}to {transform: rotate;}}.out-ring2 {position: absolute;top:
    6px;left: 6px;}.out-ring2::before, .out-ring2::after {content:
    “”;height: 220px;width: 220px;border-radius: 50%;position:
    absolute;top: -6px;left: -6px;border: 6px solid rgba(161, 164, 176,
    0.5);}.out-ring2::before {clip: rect(105px, 232px, 127px,
    100px);animation: out-ring2-before 3s cubic-bezier(0.34, 0.07, 0.68,
    0.93) infinite;}.out-ring2::after {clip: rect(112px, 232px, 120px,
    100px);animation: out-ring2-before 3s linear infinite
    reverse;}@keyframes out-ring2-before {from {transform: rotate;}to
    {transform: rotate;}}@keyframes out-ring2-after {from {transform:
    rotate;}to {transform: rotate;}}.inner-img {width: 120px;height:
    120px;border: 20px solid #B6B8C0;background:
    transparent;border-radius: 50%;position: absolute;left: 0;top:
    0;margin: 36px;}.inner-img::before {content: “”;height: 20px;width:
    66px;position: absolute;background: #B6B8C0;bottom: 0;left:
    0;transform: rotate;transform-origin: left;}.inner-img::after
    {content: “”;height: 20px;width: 66px;position: absolute;background:
    #B6B8C0;bottom: 0;right: 0;transform: rotate;transform-origin:
    right;}.inner-img-shelter::before, .inner-img-shelter::after
    {content: “”;height: 4px;width: 21px;background: #282828;position:
    absolute;top: 15px;}.inner-img-shelter::before {left:
    -4px;transform: rotate;transform-origin: bottom
    right;}.inner-img-shelter::after {right: -4px;transform:
    rotate;transform-origin: bottom left;}.inner-img-triangle::before
    {content: “”;width: 0px;height: 0px;border-width: 0px 0px 50px
    20px;border-left-color: transparent;border-bottom-color:
    #B6B8C0;border-style: solid;position: absolute;top: 20px;left:
    34px;}.inner-img-triangle::after {content: “”;width: 0px;height:
    0px;border-width: 0px 20px 50px 00px;border-right-color:
    transparent;border-bottom-color: #B6B8C0;border-style:
    solid;position: absolute;top: 20px;right:
    34px;}.inner-ring-container {width: 200px;height: 200px;position:
    absolute;top: 16px;left: 16px;background: transform;}.inner-ring1
    {width: 180px;height: 180px;border: 10px solid
    #F9D64A;border-radius: 50%;position: absolute;clip: rect(90px,
    200px, 110px, 110px);animation: inner-ring1 3s infinite
    linear;z-index: 2;}@keyframes inner-ring1 {from {transform:
    rotate;}to {transform: rotate;}}.inner-ring3 {width: 200px;height:
    200px;background: transparent;position: absolute;top: 0;left:
    0;animation: inner-ring3 infinite 2s linear;}.inner-ring3-container1
    {width: 100px;height: 200px;overflow: hidden;position: absolute;top:
    0;left: 0;}.inner-ring3-container1-content {width: 200px;height:
    200px;position: absolute;animation: inner-ring3-container1-content
    2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}.inner-ring3-content1
    {height: 180px;width: 180px;border-radius: 50%;border: 10px solid
    #4D4C2D;border-bottom-color: transparent;border-right-color:
    transparent;transform: rotate;animation: inner-ring3-content1 2s
    linear infinite;}@keyframes inner-ring3 {from {transform: rotate;}to
    {transform: rotate;}}@keyframes inner-ring3-content1 {from
    {transform: rotate;}35.5% {transform: rotate;}50% {transform:
    rotate;}to {transform: rotate;}}@keyframes
    inner-ring3-container1-content {0% {transform: rotate;}64.5%
    {transform: rotate;}100% {transform:
    rotate;}}.inner-ring3-container2 {width: 100px;height:
    200px;overflow: hidden;position: absolute;top: 0;right:
    0;}.inner-ring3-container2-content {width: 200px;height:
    200px;position: absolute;top: 0;left: -100px;animation:
    inner-ring3-container2-content linear 2s
    infinite;}.inner-ring3-content2 {height: 180px;width:
    180px;border-radius: 50%;border: 10px solid
    #4D4C2D;border-bottom-color: transparent;border-left-color:
    transparent;transform: rotate;animation: inner-ring3-content2 2s
    cubic-bezier(0.5, 0, 1, 0.5) infinite;}@keyframes
    inner-ring3-content2 {from {transform: rotate;}35.5% {transform:
    rotate;}to {transform: rotate;}}@keyframes
    inner-ring3-container2-content {0% {transform: rotate;}50%
    {transform: rotate;}64.5% {transform: rotate;}100% {transform:
    rotate;}}.inner-ring2 {width: 200px;height: 200px;z-index:
    2;position: absolute;animation: inner-ring2 infinite 2s
    linear;}.inner-ring2-container {width: 100px;height: 200px;overflow:
    hidden;position: absolute;top: 0;left: 0;}.inner-ring2-content
    {height: 180px;width: 180px;border-radius: 50%;border: 10px solid
    #F9D64A;border-bottom-color: transparent;border-right-color:
    transparent;z-index: 2;animation: inner-ring2-content infinite
    linear 2s;}@keyframes inner-ring2 {0% {transform: rotate;}50%
    {transform: rotate;}100% {transform: rotate;}}@keyframes
    inner-ring2-content {0% {transform: rotate;}50% {transform:
    rotate;}100% {transform: rotate;}}

相关文章

发表评论

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

*
*
Website