文字滚动跑马灯效果的研究

最新推荐文章于 2024-09-03 20:40:28 发布

tcap99

最新推荐文章于 2024-09-03 20:40:28 发布

阅读量378

点赞数

分类专栏： css 前端文章标签： css

本文链接：https://blog.csdn.net/tcap99/article/details/83353889

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

偶尔间，看到别人的文字滚动效果十分好奇，自己研究一下代码，写上注释记录。
首先，注明出处
https://blog.csdn.net/ns2250225/article/details/79804886

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3_MARQUEE</title>

    <style>
        .marquee {
            width: 450px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 50s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 27.5em }
            100% { text-indent: -105em }
        }

        /* Make it pretty */
        .microsoft {
            padding-left: 1.5em;
            position: relative;
            font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
        }

        /* ::before was :before before ::before was ::before - kthx */
        .microsoft:before, .microsoft::before {
            z-index: 2;
            content: '';
            position: absolute;
            top: -1em; left: -1em;
            width: .5em; height: .5em;
            box-shadow: 1.0em 1.25em 0 #F65314,
                        1.6em 1.25em 0 #7CBB00,
                        1.0em 1.85em 0 #00A1F1,
                        1.6em 1.85em 0 #FFBB00;
        }

        .microsoft:after, .microsoft::after {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2em; height: 2em;
            background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
        }
    </style>
</head>
<body>
    <p class="microsoft marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
</body>
</html>

.marquee {
            width: 450px;
            /* 实现居中效果*/
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 30s linear infinite;
        }

首先从marquee说起，起先我不知道这单词，查MDN才知道这原来是一个HTML标签，后来被禁用了，大概因为兼容性差和落后时代吧。
margin: 0 auto;常用于已知宽度的水平居中。
overflow: hidden 是用来隐藏超过宽度的文字流。
white-space: nowrap; 是为了不换行
box-sizing: border-box; 是为了元素的宽度和声明的width: 450px一样而设置的
animation: marquee 30s linear infinite; 滚动动画

.marquee:hover {
            /* 鼠标悬浮暂停动画*/
            animation-play-state: paused
        }


`@keyframes marquee {
        	/*开始滚动前文字缩进*/
            0%   { text-indent: 27.5em }
            /* 设置终止时文本缩进为负值，从而实现滚动*/
            100% { text-indent: -105em }
        }

有意思的是，网页中出现的微软是通过伪元素生成的（测试过，删去.microsoft:before和.microsoft:after对布局没影响）。这到底是怎么做到？我思考挺久的，后面才意识到微软图标的四个小格子全部是由伪元素生成的小格子的box-shadow。
为了验证我的猜想，将css代码做以后更改

 body {
        	margin: 0;
        }
        .marquee {
            width: 450px;
            margin: 0 auto;
            /* 将overflow: hidden注释*/
            /*overflow: hidden;*/
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 15s linear infinite;
        }
        .microsoft::before {
            z-index: 2;
            content: '';
            position: absolute;
            background-color: black;
            top: 0em; left: 0em;
            width: .5em; height: .5em;
            box-shadow: 1.0em 1.25em 0 #F65314,
                        1.6em 1.25em 0 #7CBB00,
                        1.0em 1.85em 0 #00A1F1,
                        1.6em 1.85em 0 #FFBB00;
        }

可以看到这样的效果在这里插入图片描述

可以看到我的想法是没错。box-shadow第一个参数为阴影的水平偏移量，box-shadow第二个参数为阴影的垂直偏移量。在这里为什么垂直偏移量比水平偏移量多0.25em的原因是为了和文字垂直居中。

.microsoft::after {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2em; height: 2em;
            /* 图标底下的白色背景*/
            background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
        }

最后再用伪元素创建了一个渐变的白色背景，从而达到文字“被吃掉”的效果。
顺带一提，em是根据父元素的font-size决定的，而rem是根绝根元素（html）的font-size决定的。