css制作叶子转动
CSS 制作叶子转动效果
通过 CSS 动画和 transform 属性可以轻松实现叶子旋转效果。以下是两种常见方法：
方法一：使用 @keyframes 实现无限旋转
.leaf {
width: 100px;
height: 100px;
background-image: url('leaf.png');
background-size: contain;
animation: spin 4s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}方法二：添加悬停交互效果
.leaf {
width: 100px;
height: 100px;
background-image: url('leaf.png');
background-size: contain;
transition: transform 0.5s ease;
}
.leaf:hover {
transform: rotate(180deg);
}进阶技巧
添加摆动效果（类似风吹）
@keyframes sway {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}
.leaf {
animation: sway 2s ease-in-out infinite alternate;
}3D 旋转效果
.leaf {
transform-style: preserve-3d;
animation: 3dspin 5s infinite linear;
}
@keyframes 3dspin {
from { transform: rotateY(0) rotateX(20deg); }
to { transform: rotateY(360deg) rotateX(20deg); }
}注意事项
- 使用
transform-origin可以调整旋转中心点（默认是元素中心） - 考虑添加
will-change: transform优化动画性能 - 对于复杂动画，建议使用 CSS 预处理器管理变量和混合器
