纯Css文字上下滚动轮播

<div class="div1">

<div class="div2">

<p>111111111111111111111</p>

<p>211111111111111111111</p>

<p>311111111111111111111</p>

<p>411111111111111111111</p>

<p>511111111111111111111</p>

<p>611111111111111111111</p>

<p>711111111111111111111</p>

<p>2211111111111111111111</p>

<p>331111111111111111111</p>

<p>441111111111111111111</p>

<p>551111111111111111111</p>

<p>661111111111111111111</p>

<p>771111111111111111111</p>

<p>881111111111111111111</p>

<p>991111111111111111111</p>

<p>001111111111111111111</p>

</div>

</div>

.div1 {

width:200px;

height:200px;

overflow:hidden;

margin:auto;

position:relative;

}

@keyframes anis {

100% {

transform:translateY(-200px)

}

}img {

position:absolute;

}

.div2 {

animation:anis 10s linear infinite;

}

.div2:hover {

animation-play-state:paused;

}

 

作者:小屋
链接:http://www.rumenwu.com/operate/630.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。