只用一个div来做的弹跳小动画

最新推荐文章于 2022-07-01 10:20:20 发布

编程世界-云

最新推荐文章于 2022-07-01 10:20:20 发布

阅读量504

点赞数

文章标签： css html css3 js web开发

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103639174

版权

这篇博客介绍如何仅使用一个div通过CSS3动画实现一个弹跳小动画，包括正方形的弹跳、旋转以及阴影变化效果。利用伪元素before和after分别处理旋转和阴影，通过关键帧动画控制正方形的弹跳和旋转，使得动画更逼真。

摘要由CSDN通过智能技术生成

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

利用伪元素

由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个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%;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）