这篇博客展示了如何使用CSS3创建逼真的风吹树叶动画。通过定义不同形状的树叶，结合旋转、平移和透明度变化的动画效果，营造出树叶从上飘落的真实感。博客内容包括树叶的各个部分（如花瓣和茎）的样式定义，以及针对不同树叶的动画关键帧设置。
CSS
语言：
CSSSCSS
确定
* {
box-sizing: border-box;
}
body {
background: #1d1f20;
padding-top: 40px;
}
.leaves {
height: 300px;
width: 42em;
margin: 0 auto;
}
.leaf {
position: relative;
width: 8em;
display: inline-block;
bottom: 400px;
}
.leaf .petal {
width: 4.5em;
height: 4.5em;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
margin: 0 auto;
position: absolute;
}
.petal:nth-child(1) {
position: static;
}
.petal:nth-child(2) {
top: 30px;
transform: rotateZ(-80deg);
}
.petal:nth-child(3) {
top: 30px;
transform: rotateZ(-10deg);
right: 0;
}
.petal:nth-child(4) {
top: 70px;
transform: rotateZ(-102deg);
left: -5px;
}
.petal:nth-child(5) {
top: 70px;
transform: rotateZ(12deg);
right: -5px;
}
最低0.47元/天 解锁文章
扫一扫
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
