您的位置:时时app平台注册网站 > web前端 > HTML5CSS3特效-上下跳动的小球-遁地龙卷风

HTML5CSS3特效-上下跳动的小球-遁地龙卷风

2019-11-28 05:27

(2卡塔尔知识点详整

a. border-radius:40px;  

当div的长高都以80px的时候,div是多少个圆形,其实长高都是60px的时候也是圆型,同理都以40、30也是圆型,当然案例中绝非使用这种方式。具体实将来代码中证实

c. animation:down 1.5s infinite alternate;

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

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

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

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

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

万大器晚成对应animate:down 1.5s;

动漫片在推行到95%就到达了最终状态,剩余5%的年月会用在重临开头状态。

(1卡塔 尔(英语:State of Qatar)达成方案

动漫片效果都以用animation做的

b. position:absolute;

当div使用此属性时,margin:0 auto是没用的,小球使用了那天性子,他的档期的顺序居中的达成情势在代码中表明

(0)效果演示

 

(3)代码加解释

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

{

HTML5CSS3特效-上下跳动的小球-遁地龙卷风。      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>

HTML5CSS3特效-上下跳动的小球-遁地龙卷风。      </div>

</body>              

</html>                 

HTML5CSS3特效-上下跳动的小球-遁地龙卷风。                        

                         

(-1)写在眼下

   作者用的是chrome49,这些idea是本人在stackoverflow上回复难点时观察了,感谢那位同行,加深了自身对非常多本领点的知晓,前段时间刚到都城,繁重了生机勃勃二日,在继续的光阴里,会被铺排面试,学习布置只得按工作流走了,做完那个要看叁个相当的帅的成效,青睐动!

本文由时时app平台注册网站发布于web前端,转载请注明出处:HTML5CSS3特效-上下跳动的小球-遁地龙卷风

关键词: