方法一：


	<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="left" height="200" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="0" onMouseOut="this.start()" onMouseOver="this.stop()">
		公告：文字广播无限循环播放~
	</marquee>

属性：

onMouseOver=“this.stop()” 用来设置鼠标移入该区域时停止滚动

onMouseOut=“this.start()” 用来设置鼠标移出该区域时继续滚动

align （标签里面的内容的对其方式）

absbottom：绝对底部对齐

absmiddle：绝对中央对齐

texttop：顶线对齐

top：顶部对齐

baseline：底线对齐

bottom：底部对齐（默认）

middle：中间对齐

left：左对齐

right：右对齐

behavior （设定滚动的方式）

scroll：表示由一端滚动到另一端，循环滚动。

slide：表示由一端滚动到另一端，不会重复。

alternate：表示在两端之间来回滚动。

bgcolor （设定活动字幕的背景颜色）

RGB：rgb(0,0,255)

颜色名：red

16进制：#5C7C99

direction （设定活动字幕的滚动方向）

up：向上

down：向下

left：向左

right：向右

height （设定活动字幕的高度）

width （设定活动字幕的宽度）

hspace （设定活动字幕里所在的位置距离父容器水平边框的距离）

vspace （设定活动字幕里所在的位置距离父容器垂直边框的距离）

loop （设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1 ）

scrollamount （设定活动字幕的滚动速度，单位pixels ）

scrolldelay （设定活动字幕滚动两次之间的延迟时间，单位millisecond，毫秒）

方法二：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <body>
	<div class="box">
    	<p class="animate">
        	公告：文字广播无限循环播放~
    	</p>
    </div>
</body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 300px;
            margin: 0 auto;
            border: 1px solid #ff6700;
            overflow: hidden;
        }
        .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display: inline-block;
            white-space: nowrap;
            /* 动画时间10秒，动画名称worldsLoop，动画速度从头到尾一样，无限循环，正常播放 */
            animation: 10s wordsLoop linear infinite normal;
        }
        @keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
				background-color: #5C7C99;
            }
        }
    </style>
</head>

</html>

属性:

animation animation-name：必须存在，因为animation-name的值默认是none，没有动画。

animation-duration：(动画执行一次所需时间)必须存在，因为animation-duration的值默认是0，没有动画。

animation-delay：(动画在开始前的延迟时间)值可以是秒（s）或者是毫秒（ms）,默认值是0，没有延迟。

animation-timing-function：(动画以何种运行轨迹完成一个周期)值是贝塞尔曲线最常用的值有以下几个：

（1）ease,表示动画以低速开始，然后加速，最后在结束前变慢，默认值。

（2）linear:表示动画从头到尾的速度都是相同的。

（3）ease-in:表示动画以低速开始。

（4）ease-out:表示动画以低速结束。

（5）ease-in-out:表示动画以低速开始和结束。

（6）可以直接使用三次贝塞尔函数，使用网站是cubic-bezier.com。

animation-iteration-count：(动画播放次数)属性值有两种：

（1）直接写数字，自定义想要播放动画的次数。

（2）infinite：设置动画无线循环播放。

animation-fill-mode：(定义元素动画结束以后或者未开始的元素样式) 属性：

（1）默认值为none，标示，不会在动画结束或者未开始时给元素添加样式

（2）forwards:表示动画结束后，元素直接接使用当前样式。

（3）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时）

animation-direction：(是否轮流反向播放动画)属性：

（1）默认值是normal，动画正常播放。（如果动画只播放一次，则该属性无效）

（2）reverse:表示动画反向播放。

（3）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。

（4）alternate-reverse: :表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。

keyframes （创建动画）

0%：表示开始

100%：表示结束

（除了0%和100%还可以自己随便写，例如：38%，50%，66%）

translateX：表示在X轴方向移动位置

-webkit-表示谷歌浏览器内核，不加内核可能会导致效果在谷歌浏览器里失效

文字广播循环播放

方法一：

方法二：