双色球基本走势图体坛网|双色球基本走势图50期|
首页»HTML/CSS»有趣的CSS弹跳动画

有趣的CSS弹跳动画

来源:果冻 发布时间:2019-05-22 阅读次数:

  这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。

 利用伪元素

  由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却?#21069;?#36825;个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。

.box{
  position:relative;

}
.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

 CSS动画

  画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。

.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*从20%的地方才开始变形*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*到80%的地?#20132;指?#21407;状*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*让阴影保持在原位*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

 加入旋转效果

  了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹?#20808;?#30340;时候从45旋转到0度,然后在这一?#24067;?#20174;0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

  举一反三,我们也可以把角度反转,就会往另外一边弹跳。

  如果我?#21069;?#21160;画里头添加linear,就会变成线性的连续方式喔。

QQ群:WEB开发者官方群(515171538),验证消息:10000
微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
CSS
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
双色球基本走势图体坛网
韩国快乐8是谁开奖 新11选5开奖直播 手机棋牌游戏换现金 星彩网官方网站 彩经网北京十一选五走势图 澳洲幸运8是什么彩票 彩票历史记录器 北京赛车玩法走势图 棋牌游戏刷流水秘诀 北京赛车开奖记录