HTML内容轮播之纯Css文字轮播轮播【记录】

HTML内容轮播之纯Css文字轮播轮播

HTML

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

css

.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;
}