Home >Web Front-end >HTML Tutorial >HTML5CSS3 special effects-ball jumping up and down

HTML5CSS3 special effects-ball jumping up and down

高洛峰Original: 2016-10-14 15:36:192231browse

(-1)写在前面

我用的是chrome49，这个idea是我在stackoverflow上回答问题时看到了，多谢这位同行，加深了我对很多技术点的理解，最近刚到北京，忙碌了一两天，在后续的日子里，会被安排面试，学习计划只能按工作流走了，做完这个要看一个特别酷的效果，好激动!

(0)效果演示

（1）实现方案

动画效果都是用animation做的

（2）知识点详解

a. border-radius:40px;

当div的长高都是80px的时候，div是一个圆形，其实长高都是60px的时候也是圆型，同理都是40、30也是圆型，当然案例中没有使用这种方式。具体实现在代码中说明

b. position:absolute;

当div使用此属性时，margin：0 auto是无效的，小球使用了这个属性，他的水平居中的实现方式在代码中说明

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%的时间会用在回到初始状态。

(3)代码加解释

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML common text elementsNext article：HTML common text elements

See more

HTML5CSS3 special effects-ball jumping up and down

Related articles