前端-⽂字循环滚动播放
⽅法⼀
⼀、index.html
<!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">
<title>⽂字循环滚动效果</title>
</head>
<body>
<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="left" height="200" width="200" hspace="50" vspace="20" loop="-1" scroll amount="10" scrolldelay="0" onMouseOut="this.start()" onMouseOver="this.stop()">
公告：看完此博客你将学会marquee的详细⽤法
</marquee>
</body>
</html>
⼆、属性：
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，毫秒）⽅法⼆
⼀、index.html
html滚动字幕<!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">
<title>⽂字循环滚动效果</title>
<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>
<body>
<div class="box">
<p class="animate">
公告：看完此博客你将掌握通过CSS实现⽂字滚动效果
</p>
</div>
</body>
</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：表⽰动画以低速开始和结束。
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-表⽰⾕歌浏览器内核，不加内核可能会导致效果在⾕歌浏览器⾥失效
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论