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

}

<marquee style="WIDTH: 388pxHEIGHT: 200px" scrollamount="2" direction="up" >

<div align="left" >

</div >

<center ><font face="黑体" color="#008000" size="4" ></font ></center >

<div align="left" >

</div >

<center >

<p ><font color="#ff6600" size="4" >滚动文字</font ></p >

<p ><font color="#ff4500" size="4" >滚动文字</font ></p >

<p ><font color="#ff3300" size="4" >滚动文字</font >

</p >

</marquee >

marquee 参数:

BGColor:滚动文本框的背景颜色。

Direction:滚动方bai向设置,可选择Left、Right、up和down。

scrolldelay:每轮滚动之间的延迟时间,越大越慢。

scrollamount:一次滚动总的时间量,数字越小滚动越慢。

Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。

Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。

Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

loop:滚动次数。默认为infinite

hspace、vspace:前后、上下的空行。

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

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

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

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

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

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