CSS3에서 텍스트가 오른쪽으로 반복되는 효과를 구현하는 방법 및 모바일 단말기에서 사용할 수 있는 예제 코드를 공유합니다.-CSS 튜토리얼-php.cn

CSS3에서 텍스트가 오른쪽으로 반복되는 효과를 구현하는 방법 및 모바일 단말기에서 사용할 수 있는 예제 코드를 공유합니다.

黄舟

풀어 주다： 2017-06-18 13:18:23

원래의

2211명이 탐색했습니다.

이 기사에서는 주로 텍스트 반복 효과를 얻기 위해 순수 CSS3를 사용하는 관련 정보를 공유합니다. 호환성 문제로 인해 모바일 단말기에서 자주 사용되며 달성된 효과는 매우 좋습니다. 자세한 소개와 샘플 코드가 필요한 친구는 아래를 살펴보세요.

이 글에서는 텍스트 반복 효과를 얻기 위해 순수 CSS3를 사용하는 방법에 대해 소개합니다. 아래에서는 먼저 샘플 코드를 살펴보겠습니다.

샘플 코드:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .shadow {
                text-align: center;
                /* 背景颜色线性渐变 */
                    /* 老式写法 */
                        /* linear为线性渐变，也可以用下面的那种写法。left top，right top指的是渐变方向，左上到右上 */
                        /* color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。所以本次渐变为两边灰色，中间渐白色 */
                background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
                    /* 新式写法 */
                /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */

                /* 设置为text，意思是把文本内容之外的背景给裁剪掉 */
                -webkit-background-clip: text;
                /* 设置对象中的文字填充颜色 这里设置为透明 */
                -webkit-text-fill-color: transparent;
                /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */
                -webkit-animation: animate 1.5s infinite;
            }
            /* 兼容写法，要放在@keyframes前面 */
            @-webkit-keyframes animate {
                /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
            @keyframes animate {
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
        </style>
    </head>
    <body>
        <p class="shadow">文字向右闪过效果</p>
    </body>
</html>

로그인 후 복사

렌더링은 다음과 같습니다.