我想制作一个“冲压”动画,已经到了以下几点:
div {
height: 75px;
width: 75px;
background-color: brown;
border: 4px dashed black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 40px;
overflow: hidden;
animation: drop 3s forwards;
}
@keyframes drop {
from {
opacity: .25;
transform-origin: 50% 50%;
transform: rotate(25deg) scale(5) translate(-40px, 70px);
transition: all ease-in;
filter: drop-shadow(-4px -20px 4px black);
}
to {
opacity: .8;
transform: rotate(-15deg) scale(1);
filter: drop-shadow(0 4px 4px black);
}
}
<div></div>
阴影看起来不错,但我认为如果有一种方法会很酷,所以它一开始是静止的、大的和模糊的,但随着圆圈越来越近,它变得更加精致——就像有一个邮票将要击中/着陆的地方的轮廓(就像在视频游戏中一样)。
如何才能做到这一点?就此而言,这是好的用户体验吗?
我想使用它的应用程序是 Angular,因此使用 Angular 的动画(或纯 javascript)的解决方案也很好。
最佳答案
这是你想要的吗?只需将阴影偏移设置为您定义的翻译:-40px, 70px
div {
height: 75px;
width: 75px;
background-color: brown;
border: 4px dashed black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 40px;
overflow: hidden;
animation: drop 3s forwards;
}
@keyframes drop {
from {
opacity: .25;
transform-origin: 50% 50%;
transform: rotate(25deg) scale(5) translate(-40px, 70px);
transition: all ease-in;
filter: drop-shadow(40px -70px 20px black);
}
to {
opacity: .8;
transform: rotate(-15deg) scale(1);
filter: drop-shadow(0 4px 4px black);
}
}
<div></div>
关于带有固定阴影的 CSS 下拉动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58921945/