[学习交流] 【广州前端】有意思的css3属性(三)-跑马灯效果

【简介】

还记得以前网页中那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

【具有跑马的灯效果的标签marquee】

behavior属性

behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

[HTML] 纯文本查看 复制代码

<marquee behavior="alternate">我来回滚动</marquee>[/align]
    <marquee behavior="scroll">我单方向循环滚动</marquee>

    <marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>

    <marquee behavior="slide">我只滚动一次</marquee>

    <marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

效果图：

direction属性

文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。如下所示:

[HTML] 纯文本查看 复制代码

 <marquee direction="right">我向右滚动</marquee>[/align]
    <marquee direction="right">我向下滚动</marquee>

效果图：

hspace和vspace属性

这两个属性决定滚动矩形区域距周围的空白区域.

[HTML] 纯文本查看 复制代码

 <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>[/align]
    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>

loop属性

loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示:

[HTML] 纯文本查看 复制代码

<marquee loop="2">我滚动2次。</marquee>[/align]
    <marquee loop="infinite">我无限循环滚动。</marquee>

<marquee loop="-1">我无限循环滚动。</marquee>

【注意】

虽然HTML的marquee标签在XHTML中被抛弃了，但是各浏览器还是支持的，但是有一个问题就是，marquee标签可能会占用比较大的cpu，经研究，结论是marquee的速度不能太快。下面使用css3属性来实现跑马灯的效果。

【利用css3的animation实现跑马灯效果】

效果图：

代码：

[HTML] 纯文本查看 复制代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<style>

    /*定义一个动画函数*/

    @keyframes gzczAnimation{

        0% { transform: translateX(0); }

        100% { transform: translateX(-100%); }

    }

    .marquee{

        width: 600px;

        height: 44px;

        background-color: lightpink;

        line-height: 44px;

        border: none;

        display: block;

        margin: 0 auto;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: clip;

        position: relative;

        font-size: 28px;

    }

    .marquee .content{

        display: inline-block;

        position: relative;

        padding-right: 0px;

        animation: gzczAnimation 3s linear infinite;

        white-space: nowrap;

    }

</style>

<p class="marquee"><span class="content">测试文本</span></p>

</body>

</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】有意思的css3属性(三)-跑马灯效果

0 个回复