我希望标签无限下降.我试图通过CSS转换来做到这一点,但无法让它工作.
我希望.fall能够不断下雨.我怎样才能让它发挥作用？
很抱歉提出一个摇摆问题,但可能是小提琴将清除我想要完成的事情.
HTML
<div class='rain'>
<p class='fallSec'>
< $" " 1 0 1 0 0 0 $1 0 2 ( { $1 0=) 0 1 0 0 0 1 }
</p>
</div>
CSS
.rainSec {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.rainSec .fall {
width: 20px;
color: white;
font-size: 36px;
float: left;
margin: 10px;
-webkit-animation: fadeInDown 10s infinite;
animation: fadeInDown 10s infinite;
}
.rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.rain .fallSec {
color: blue;
width: 20px;
font-size: 36px;
float: left;
margin: 10px;
-webkit-animation: fadeInDown 8s infinite;
animation: fadeInDown 8s infinite;
transition-delay: 8s;
}
@-webkit-keyframes fadeInDown {
0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
}
}
解决方法
我改变了你的makup和动画设置,现在符号不断下降,它们之间没有空格：
html,body{height:100%;padding:0;margin:0;}
.wrap{position:relative;height:100%;overflow:hidden;}
.rainSec,.rain {
font-size:2em;
color:blue;
width:1em;
height:100%;
position:absolute;
left:0.5em;
bottom:100%;
overflow:hidden;
}
.rain{
-webkit-animation: fadeInDown 8s infinite;
animation: fadeInDown 8s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.rainSec {
-webkit-animation: fadeInDown 8s 2s infinite;
animation: fadeInDown 8s 2s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes fadeInDown {
0% { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(200%); }
50.1%{ -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(200%); }
}
@-keyframes fadeInDown {
0% { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(200%); }
50.1%{ -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(200%); }
}
<div class="wrap">
<p class='rain'>< $" " 1 0 1 0 0 0 $1 0 2 ( { $1 0 = ) 0 1 0 0 0 1 }</p>
<p class='rainSec'>< $" " 1 0 1 0 0 0 $1 0 2 ( { $1 0 = ) 0 1 0 0 0 1 }</p>
</div>
