How to use CSS3 to achieve the effect of looping to the right-CSS Tutorial-php.cn

How to use CSS3 to achieve the effect of looping to the right

黄舟

Release： 2017-06-04 11:43:32

Original

1833 people have browsed it

How to use CSS3 to achieve the effect of looping to the right

<!DOCTYPE html>
<html>
    <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>
        <div>文字向右闪过效果</div>
    </body>
</html>

Copy after login

1. Directly enter the code! Here is the rendering:

2. This white gradient flash effect is very easy and convenient to make with CSS3. The only disadvantage is probably the compatibility issue. So now it is generally used on mobile terminals.

3. Come on, come on! (Knocking on the blackboard) I think the code comments are relatively clear, so just draw the key points! ! !

1. Infinite

2. -webkit-text-fill-color: transparent; The text fill color is transparent. If it is not set, the white gradient crossing effect will not be visible!

3, -webkit-background-clip: text; cut off the background outside the text content. If it is not added, the text cannot be displayed, only the gradient color!

4. color-stop() The color-stop function of the gradient represents the position and color of the gradient. It is it. We can make the gradient wherever we want, and then let it move, and a flash will appear. A flash of effect!

4. Finally, let’s talk about the idea:

First, set a gradient background color with white in the middle and gray on both sides;

Secondly, set the text fill color to transparent (can See the white background);

Next, crop the background color outside the text (only display the text);

Finally, use @keyframes to cycle the background white position from left to Right execution.

The above is the detailed content of How to use CSS3 to achieve the effect of looping to the right. For more information, please follow other related articles on the PHP Chinese website!