marquee:
页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。
代码展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;text-decoration:none;} .marquee{width:500px;height:40px;border:1px solid #ccc;margin:100px auto;font-size:20px;line-height:40px;} </style> </head> <body> <div class="marquee"> <marquee direction="right" height="40" scrollamount="5" loop="-1" behavior="alternate" onmouseover="stop();" onmouseout="start();"><a href="###">内容啊实打实大师大声大声道</a></marquee> </div> </body> </html>
效果展示：
知识点总结：
一.支持两个事件：
onmouseover="this.start()" ：用来设置鼠标移入该区域时停止滚动；
onmouseout="this.stop()"：用来设置鼠标移出该区域时继续滚动；
二.支持属性
1.align：设定<marquee>标签内容的对齐方式
absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）
left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐
2.behavior：设定滚动的方式
alternate： 表示在两端之间来回滚动。
scroll： 表示由一端滚动到另一端，会重复。
slide： 表示由一端滚动到另一端，不会重复。
3.direction：设定活动字幕的滚动方向（down,up,left,right）;
4.height:设定活动字幕的高度;
5.设定活动字幕的宽度;
6.hspace:设定活动字幕里所在的位置距离父容器水平边框的距离;
7.vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离;
8.loop:设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1;
9.scrollamount:设定活动字幕的滚动速度，单位pixels;
10.scrolldelay:设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）
扩展：
仿marquee
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style> .marquee { margin:100px auto; height: 30px; width: 420px; border:1px solid red; overflow: hidden; } .marquee div { display: block; width: 100%; height: 30px; line-height:30px; overflow: hidden; animation: marquee 5s linear infinite alternate; text-align: right; } @keyframes marquee { 0% {transform: translate(0px); } 100% {transform: translate(-100%);} } </style> </head> <body> <div class="marquee"> <div> <span>世界这么大,我想去看看1</span> </div> </div> </body> </html>