一个CSS动画实现落体与涟漪

马黑黑 · 发表于 2022-3-31 13:33

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-3-31 13:34

代码：


<style type="text/css">

.mnDiv {
   width: 760px;
   height: 500px;
   background: linear-gradient(gray,tan,blue);
   overflow: hidden;
   position: relative;
}
.ball {
   --w: 20px;
   --h: 20px;
   position: absolute;
   width: var(--w);
   height:var(--h);
   left: calc(50% - var(--w) / 2);
   background: #eee;
   border: 1px solid #eee;
   border-radius: 50%;
   animation: drop 2s linear infinite;
}

@keyframes drop{
   0% { box-shadow: none; background: #eee;  top: -10px; opacity: .6; }
   58% { box-shadow: none; background: #eee; top: 400px; opacity: .6; }
   59% { box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;  opacity: 0; transform: scale(1, 1); }
   60% {  box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;  opacity: .1; transform: scale(1.2, 1); }
   100% {  box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;  opacity: 0; transform: scale(7, 5.8); }
}

</style>

<div class="mnDiv">
   <div class="ball"></div>
</div>