像CSS Transitions一样下雨

前端之家收集整理的这篇文章主要介绍了像CSS Transitions一样下雨前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望标签无限下降.我试图通过CSS转换来做到这一点,但无法让它工作.

我希望.fall能够不断下雨.我怎样才能让它发挥作用?

很抱歉提出一个摇摆问题,但可能是小提琴将清除我想要完成的事情.

JSFIDDLE

HTML

@H_404_10@<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

@H_404_10@.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和动画设置,现在符号不断下降,它们之间没有空格:

DEMO

@H_404_10@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%); } } @H_404_10@<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>

猜你在找的CSS相关文章