我正在尝试为我正在处理的初始页面创建流行的“飘落的雪花/物体”图像。我有图像,它们轻轻地落下,但我无法得到均匀的、“随机的”传播到落下。它们落在明显的“团 block ”中。我知道这是由于用于创建它们的数学。我有数学学习障碍,这让我无法自己解决这个问题。有人可以查看我的代码并帮助我获得不那么均匀、不那么 block 状的花瓣落下吗?一些看起来更自然的东西,比如一棵被风吹过的樱桃树,一束花瓣散落并飘过初始页面。
.petals {
text-align: center;
}
.petals span {
display: inline-block;
width: 19px;
height: 19px;
margin: -219px 40px 54px -34px;
background: #ff0000;
background: url("http://www.cafenocturne.com/testpage/images/MiniPetal.png");
-webkit-animation: petals 15s infinite linear;
-moz-animation: petals 15s infinite linear;
-o-animation: petals 15s infinite linear;
animation: petals 15s infinite linear;
}
.petals span:nth-of-type(5n) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.petals span:nth-of-type(5n+1) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.petals span:nth-of-type(5n+2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.petals span:nth-child(3n) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.petals span:nth-child(3n+1) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
-o-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.petals span:nth-child(3n+2) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.petals span:nth-child(7n) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.petals span:nth-child(7n+1) {
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-o-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.petals span:nth-child(7n+2) {
-webkit-animation-delay: 3.9s;
-moz-animation-delay: 3.9s;
-o-animation-delay: 3.9s;
animation-delay: 3.9s;
}
.petals span:nth-of-type(5n) {
-webkit-animation-delay: 4.3s;
-moz-animation-delay: 4.3s;
-o-animation-delay: 4.3s;
animation-delay: 4.3s;
}
.petals span:nth-of-type(5n+1) {
-webkit-animation-delay: 4.7s;
-moz-animation-delay: 4.7s;
-o-animation-delay: 4.7s;
animation-delay: 4.7s;
}
.petals span:nth-of-type(5n+2) {
-webkit-animation-delay: 5.3s;
-moz-animation-delay: 5.3s;
-o-animation-delay: 5.3s;
animation-delay: 5.3s;
}
.petals span:nth-child(3n) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
-o-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.petals span:nth-child(3n+1) {
-webkit-animation-delay: 6.2s;
-moz-animation-delay: 6.2s;
-o-animation-delay: 6.2s;
animation-delay: 6.2s;
}
.petals span:nth-child(3n+2) {
-webkit-animation-delay: 6.8s;
-moz-animation-delay: 6.8s;
-o-animation-delay: 6.8s;
animation-delay: 6.8s;
}
.petals span:nth-child(7n) {
-webkit-animation-delay: 7.1s;
-moz-animation-delay: 7.1s;
-o-animation-delay: 7.1s;
animation-delay: 7.1s;
}
.petals span:nth-child(7n+1) {
-webkit-animation-delay: 7.7s;
-moz-animation-delay: 7.7s;
-o-animation-delay: 7.7s;
animation-delay: 7.7s;
}
.petals span:nth-child(7n+2) {
-webkit-animation-delay: 8.1s;
-moz-animation-delay: 8.1s;
-o-animation-delay: 8.1s;
animation-delay: 8.1s;
}
.petals span:nth-child(9n) {
-webkit-animation-delay: 8.6s;
-moz-animation-delay: 8.6s;
-o-animation-delay: 8.6s;
animation-delay: 8.6s;
}
.petals span:nth-child(9n+1) {
-webkit-animation-delay: 9.2s;
-moz-animation-delay: 9.2s;
-o-animation-delay: 9.2s;
animation-delay: 9.2s;
}
.petals span:nth-child(9n+2) {
-webkit-animation-delay: 9.8s;
-moz-animation-delay: 9.8s;
-o-animation-delay: 9.8s;
animation-delay: 9.8s;
}
.petals span:nth-child(11n) {
-webkit-animation-delay: 10.3s;
-moz-animation-delay: 10.3s;
-o-animation-delay: 10.3s;
animation-delay: 10.3s;
}
.petals span:nth-child(11n+1) {
-webkit-animation-delay: 10.7s;
-moz-animation-delay: 10.7s;
-o-animation-delay: 10.7s;
animation-delay: 10.7s;
}
.petals span:nth-child(11n+2) {
-webkit-animation-delay: 11.1s;
-moz-animation-delay: 11.1s;
-o-animation-delay: 11.1s;
animation-delay: 11.1s;
}
@-webkit-keyframes petals {
0% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
}
75% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
}
100% {
width: 19px;
height: 19px;
opacity: 0;
-webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
}
}
@-moz-keyframes petals {
0% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
}
75% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
}
100% {
width: 19px;
height: 19px;
opacity: 0;
-webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
}
}
<div class="petals">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
,
最佳答案
最简单的方法是使用 js 为每个花瓣随机生成动画延迟(示例使用 jquery,抱歉格式不正确):
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(".petals span").each(function() {
var delay = getRandomInt(1, 100) / 10
$(this).css("animation-delay", delay + "s");
});
关于html - 不均匀的 CSS 变换动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28470588/