Question

这是一个个人挑战，我对我在下面提出的方法感到满意，但我很想知道是否有其他方法。

我正在使用徽标包含树叶图像的网站。

我认为让叶子看起来“风吹”到最终的标志位置可能会引人注目。

我想改进我编写的CSS @keyframes动画的第一个（非常基本的）版本：

@keyframes leafanimation {
     0% {transform:translate(900px,500px); color:rgba(255,0,0,0);}
    80% {transform:translate(0,0); color:rgba(255,0,0,0);}
   100% {transform:translate(0,0); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

<div class="my-logo">
My Logo
<div></div>
</div>

Answer 1

这是我（最终）使用一系列translate和rotate CSS transforms提出的解决方案：

＆＃13;

@keyframes leafanimation {
         0% {transform:translate(900px,500px) rotate(0deg); color:rgba(255,0,0,0);}
        20% {transform:translate(850px,450px) rotate(360deg); color:rgba(255,0,0,0);}
        40% {transform:translate(450px,200px) rotate(720deg); color:rgba(255,0,0,0);}
        60% {transform:translate(100px,100px) rotate(1080deg); color:rgba(255,0,0,0);}
        80% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,0);}
       100% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

＆＃13;

<div class="my-logo">
My Logo
<div></div>
</div>

＆＃13;

叶子的CSS动画图像（好像在风中吹）

1 个答案: