一个废弃标签的动画效果

  一个废弃标签的动画效果  

开发工具与关键技术：DW 前端
作者：盘子
撰写时间：2019年1月20
下面分享的这个被称为废弃的标签，它所实现的效果叫做跑马灯效果，或者说它本身就自带这样的效果，而这个标签叫做marquee标签。 < marquee >标签是成对出现的标签，首标签< marquee > 和尾标签< /marquee >之间的内容就是滚动内容。也就是说在这个标签中间添加文字或图片，即它们之间的内容，而这些内容便会具有滚动的动画效果。marquee标签用起来方便，美中不足的是总会留有空白，所以又被称为废弃标签。
下面做了个小案例来分享下它的实现效果，首先是源代码部分。这里就用了三个marquee标签,并在里面放置了文字、图片，见实现的代码以及截图如下：

在这里我给了它一个div作为一个大的盒子并设置了背景颜色为黑色。文字、图片都给它设置了marquee标签的不同属性。下面来看一下此标签的属性：
标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都具有可选性。
单个< marquee >< /marquee >指普通滚动，即它本身具有的滚动功能
behavir属性：
< marquee behavior=slide >< /marquee >滑动(只滚动一次)
< marquee behavior=scroll >< /marquee >单方向循环滚动
< marquee behavior=alternate >< /marquee >来回滚动
direction属性：
< marquee direction=up >< /marquee >向上滚动
< marquee direction=down >< /marquee >向下滚动
< marquee direction=right >< /marquee >向右滚动
< marquee direction=left >< /marquee >向左滚动
loop属性：
决定滚动文字的滚动次数,参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示：
< marquee loop=2 >< /marquee >滚动次数为两次
< marquee loop=”infinite” >< /marquee >无限循环滚动
< marquee loop=”-1” > < /marquee>无限循环滚动
< marquee width=180 >< /marquee >设定宽度
< marquee height=30 >< /marquee >设定高度
hspace和vspace属性 这两个属性决定滚动矩形区域距周围的空白区域距离.
< marquee width=”300” height=”30” vspace=”10” hspace=”10” >< /marquee >矩形边缘水平和垂直距离周围各10个像素
< marquee bgcolor=ff0000 >< /marquee >设定背景颜色
Scrollamount属性和scrolldelay属性，这两个属性决定文字滚动的速度和延时，参数值都是正整数。
< marquee scrollamout=30 >< /marquee >设定滚动时间
< marquee scrolldelay=”30” > < /marquee >
< marquee scrolldelay=”1000” scrollamount=”100” > < /marquee >
< marquee οnmοuseοver=“this.stop() " >< /marquee >鼠标经过上面时停止滚动
< marquee οnmοuseοver=” this.start()" >< /marquee >鼠标离开时开始滚动
< img src=" " >插入图片,参数有:width=“宽度”
alt="说明文字"height="高"border=“边框”
一个标签不同属性的调用，实现的效果不同，也可以组合应用。
而在css样式部分我就用了句多方法组合变形，见代码及截图如下：

transform是css3动画中一个对元素进行旋转、缩放、倾斜、移动的方法，综合使用几个方法来对一个元素进行多重变形。用法如截图中画线句，四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate。
下面是动画效果图的展示：

如图1，顶部文字就是marquee标签的普通滚动，左侧图片则使用向上滚动，底部图片来回滚动。（箭头方向即运动方向）

如图2，当鼠标移动到底部图片，所设置的背景图出现 并开始变形（旋转、缩放、倾斜、移动），随着背景图的变形，小猫图片也随之变形并在上面来回运动。
（看动态视频效果更佳）