【无标题】很有趣的一个个CSS小球下落动画

雷加祥

于 2023-06-23 02:15:59 发布

阅读量462

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/m0_37408390/article/details/131346329

版权

在这里插入图片描述
代码如下

 <!-- 两个div -->
<div class="ball"></div>
<div class="ground"></div>

	.ball {
        width: 30px;
        height: 30px;
        background-color: black;
        border-radius: 50%;
        position: relative;
        left: 90px;
        animation: failing 0.5s ease-in infinite alternate;
      }
      .ground {
        width: 200px;
        height: 10px;
        background-color: black;
      }
      @keyframes failing {
        0% {
          transform: translateY(-150px) scale(1, 1);
        }
        90% {
          transform: scale(0.8, 1.2);
        }
        100% {
          transform: translateY(0) scale(1.2, 0.8);
        }
      }