css实现文字轮播代码怎么写

html-css014

css实现文字轮播代码怎么写,第1张

<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

}

简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红、绿、蓝)的效果。

不能发视频,截图来代替吧

1.显示 轮播图1(实际轮播的第2个元素li)

2.显示 轮播图2(实际轮播的第3个元素li)

3.显示 轮播图3(实际轮播的第4个元素li)

4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)

可以转为行内样式啊。就是直接仔仔html里面。或者吧css写在你的代码以前也可以啊。

例如:

<style>

这里是css

</style>

《这里是轮播代码》