css制作叶子转动 |css对图片的动效

/* HTML结构 */
<div class="tree">
<div class="leaf"></div>
</div>
/* CSS样式 */
.tree {
width: 100px;
height: 100px;
background-color: brown;
border-radius: 50%;
position: relative;
}
.leaf {
width: 40px;
height: 40px;
background-color: green;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
animation: leaf-rotate 5s infinite linear;
}
@keyframes leaf-rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.7);
}
100% {
transform: rotate(360deg) scale(1);
}
}

首先大家创建一个树枝的容器，然后在容器中创建一个叶子的元素。大家为树枝容器设置了背景颜色和圆角。接着，大家为叶子元素设置了宽高、背景颜色、圆角和位置。

接下来，使用CSS的animation属性来实现动画效果。大家定义了一个名为leaf-rotate的动画，循环周期为5秒，动画效果为线性运动。在动画中，大家使用transform属性对叶子元素进行旋转和缩放。通过keyframes关键字，大家定义了动画效果的具体过渡状态。

需要注意的是，大家定义的旋转角度为360度，使得叶子能够无限循环旋转。大家在50%的状态下将叶子缩小，使得叶子在旋转时呈现出盘旋落叶的效果。

通过以上的步骤，大家就可以实现一个优美的叶子转动动效了。通过更改容器和叶子的样式，大家还可以实现更多变化的动效效果。