【4858美高梅】遁地沙台风,上下跳动的小球

By admin in 4858美高梅 on 2019年4月21日

(-1)写在前边

  
笔者用的是chrome4九,那些idea是自己在stackoverflow上回复难点时看到了,多谢那位同行,加深了本人对广大技艺点的知情,近来刚到都城,费力了一两日,在接二连三的光阴里,会被安排面试,学习安顿只得按职业流走了,做完那些要看3个尤其酷的效应,好激动!

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

(-一)写在前边

  
笔者用的是chrome49,那一个idea是自家在stackoverflow上回复难题时看到了,多谢那位同行,加深了自己对广大技艺点的知道,近来刚到京城,费劲了一二日,在一而再的光景里,会被布署面试,学习安排只得按专门的学问流走了,做完这一个要看1个特别酷的效率,钟情动!

4858美高梅 1

(0)效果演示

 

(-一)写在头里

  
我用的是chrome49,那个idea是本身在stackoverflow上回答难题时观察了,多谢那位同行,加深了本身对诸多才能点的精晓,目前刚到都城,勤奋了壹两日,在后续的光阴里,会被安插面试,学习安排只得按职业流走了,做完那个要看一个特别酷的功能,好激动!

(0)效果演示

 

自己是在前端网看到的效果,点击那里进入,本身看完源码后兑现了叁回,以下介绍具体步骤:

(壹)达成方案

动画片效果都以用animation做的

(0)效果演示

 

(壹)完结方案

动画片效果都以用animation做的

观看效果,能够将其分成八个圆和里面包车型大巴logo,所以简单分为叁有的

(贰)知识点详解

(一)完成方案

卡通效果都以用animation做的

(二)知识点详解

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

a. border-radius:40px;  

当div的长高都以80px的时候,div是2个圆形,其实长高都以60px的时候也是圆型,同理都以40、30也是圆型,当然案例中从未选用那种措施。具体得以达成在代码中注脚

(2)知识点详解

a. border-radius:40px;  

当div的长高都是80px的时候,div是1个圆形,其实长高都以60px的时候也是圆型,同理都是40、30也是圆型,当然案例中一直不采取这种艺术。具体贯彻在代码中注明

注重外面包车型客车圆弧,分明是用clip属性来达成了,显著要用5遍,所以里面能够再分为七个部分,再用before和after三个伪元素,注意利用clip必须是用相对定位成分,具体clip里面包车型客车值的话能够稳步调了,假若您是三个游戏迷的话,不仿达成二个和游戏里相同的,多少个月前,当自家的情侣圈被这款游戏刷屏的时候,笔者也想娱乐的,然则当小编展开官方网址的时候

b. position:absolute;

当div使用此属性时,margin:0
auto是无效的,小球使用了那几个本性,他的水准居中的落成格局在代码中表明

a. border-radius:40px;  

当div的长高都以80px的时候,div是八个圆形,其实长高都是60px的时候也是圆型,同理都以40、30也是圆型,当然案例中尚无应用那种方法。具体实以往代码中验证

b. position:absolute;

当div使用此属性时,margin:0
auto是低效的,小球使用了那几个天性,他的程度居中的实现格局在代码中证实

4858美高梅 2QQ截图20160816205229.png4858美高梅 3

c. animation:down 1.5s infinite alternate;

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

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

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

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

b. position:absolute;

当div使用此属性时,margin:0
auto是不著见效的,小球使用了这么些性情,他的档案的次序居中的完成情势在代码中验证

c. animation:down 1.5s infinite alternate;

4858美高梅,I.一.5s
是卡通的持续时间,因为延迟时间出现在持续时间的末端,所以只现出3个带s的参数是持续时间。

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

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

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

自家竟无言以对,即使本身很协助正版,可是到底没钱。把外圆的有关样式丢进来,就足以兑现效益了,这些重大也就在clip了

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

倘诺对应animate:down 一.5s;

卡通在实施到九伍%就达到了最后状态,剩余5%的时刻会用在回来开头状态。

c. animation:down 1.5s infinite alternate;

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

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

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

【4858美高梅】遁地沙台风,上下跳动的小球。      {

           …

}

     

}

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

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

假如对应animate:down 一.5s;

动画在实施到九五%就达到了最终状态,剩余5%的小时会用在回来起头状态。

<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 壹.5s;

卡通在实践到九伍%就达到了最终状态,剩余伍%的日子会用在再次来到初步状态。

(叁)代码加解释

<!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落成

4858美高梅 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增添一些数字就特别形象了

4858美高梅 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;}}

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有