需要帮助让五彩纸屑降低HTML代码才能正常工作 [英] Need help getting confetti falling HTML code to work
问题描述
好的，所以我正在使用这个网页上的代码... http://codepen.io/Event_Horizon/pen/wBKVQN
这就是我所拥有的到目前为止，我无法弄明白。所有显示的是左下角的一个小颗粒落下。请帮忙！
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，身体{
身高：100％;
}
.conf-cont {
职位：相对;
宽度：100％;
身高：100％;
溢出：隐藏;
}
.confetti {
职位：绝对;
宽度：12px;
身高：12px;
背景颜色：＃f00;
不透明度：0.0;
动画名称：瀑布;
动画持续时间：5s;
animation-timing-function：easy-in-out;
动画延迟：0s;
animation-iteration-count：无限;
animation-direction：normal;
animation-fill-mode：none;
animation-play-state：running;
@for $ i从1开始粗糙20 {
&：nth-child（＃{$ i}）{
z-index：$ i;
animation-名称：fallway＃{$ i};
animation-delay：（4/20）* $ i + s;
background-color：rgb（random（255） ，随机（255），随机（255））;
}
}
}
@for $ i从1到20 {
@keyframes fallway＃{$ i} {
0％{
前5％;
左：0％+随机（95）;
不透明度：1.0;
变换：偏斜（-30deg）;
}
25％{
左：100％ - 随机（105）;
变换：偏斜（30度）; < br $>
}
50％{
左：0％+随机（95）;
变换：偏斜（ - 30deg）;
}
75％{
剩余：100％-random（105）;
变换：skew（30deg）;
}
100％{
top：100％;
left：0 ％+随机（95）;
不透明度：1.0;
变换：倾斜（-30deg）;
}
}
}
@keyframes fallway {
0％{
top：-10％;
剩余：0％+随机（95）;
不透明度：1.0;
}
25％{
剩余：0％+随机（95）;
}
50％{
剩余：0％ +随机（95）;
}
75％{
左：0％+随机（95）;
}
100％{
top：110％;
剩余：0％+随机（95） ;
不透明度：1.0;
}
}
< /风格>
< / head>
< body>
（所有div类都在这里但由于某些原因它不会出现在这个网站上，笑脸出现的实际上是百分之百）
Okay so I am using the code from this webpage... http://codepen.io/Event_Horizon/pen/wBKVQN
This is what I have so far and I can't figure it out. All that's showing is one little particle in the left corner falling. Pls help!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
.conf-cont{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.confetti{
position:absolute;
width:12px;
height:12px;
background-color:#f00;
opacity:0.0;
animation-name: fallsway;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
z-index: $i;
animation-name: fallsway#{$i};
animation-delay: (4 / 20) * $i + s;
background-color:rgb(random(255),random(255),random(255));
}
}
}
@for $i from 1 through 20 {
@keyframes fallsway#{$i} {
0%{
top:-5%;
left:0%+random(95);
opacity:1.0;
transform:skew(-30deg);
}
25%{
left:100%-random(105);
transform:skew(30deg);
}
50%{
left:0%+random(95);
transform:skew(-30deg);
}
75%{
left:100%-random(105);
transform:skew(30deg);
}
100% {
top:100%;
left:0%+random(95);
opacity:1.0;
transform:skew(-30deg);
}
}
}
@keyframes fallsway {
0%{
top:-10%;
left:0%+random(95);
opacity:1.0;
}
25%{
left:0%+random(95);
}
50%{
left:0%+random(95);
}
75%{
left:0%+random(95);
}
100% {
top:110%;
left:0%+random(95);
opacity:1.0;
}
}
</style>
</head>
<body>
(all the div classes are here but it won't show on this website for some reason and the smiley faces showing up are actually one hundred percents)
< / body>
< / html>
什么我试过了：
发布的代码是我试过的。
</body>
</html>
What I have tried:
The code posted is what I have tried.
推荐答案
我从1到20 {
&：nth-child（＃{
i from 1 through 20 {
&:nth-child(#{
i}）{
z-index：
i}) {
z-index:
i;
animation-name：fallsway＃{
i;
animation-name: fallsway#{
这篇关于需要帮助让五彩纸屑降低HTML代码才能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
