>  기사  >  웹 프론트엔드  >  CSS3를 사용하여 오른쪽으로 반복되는 효과를 얻는 방법

CSS3를 사용하여 오른쪽으로 반복되는 효과를 얻는 방법

黄舟
黄舟원래의
2017-06-04 11:43:321780검색

CSS3를 사용하여 오른쪽으로 반복하는 효과를 얻는 방법

<!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>

1. 코드를 직접 입력하세요! 렌더링은 다음과 같습니다.

2. 이 흰색 그라데이션 플래시 효과는 CSS3로 만들기가 매우 쉽고 편리합니다. 유일한 단점은 아마도 호환성 문제일 것입니다. 그래서 이제는 일반적으로 모바일 단말기에서 사용됩니다.

3. 어서 어서! (칠판을 두드리며) 코드 설명이 비교적 명확한 것 같으니 핵심만 그려주세요! ! ! 무한 ~                                                     .

2. -webkit-text-fill-color: transparent; 텍스트 채우기 색상이 투명하게 설정되지 않으면 흰색 그라데이션 효과가 표시되지 않습니다.

3. -webkit-Background-clip: 텍스트;                                                                                                                                                                                                                                                                                

4. color-stop() 그라디언트의 색상 중지 기능은 그라디언트를 원하는 위치에 만든 다음 움직이게 하면 반짝이는 효과가 나타납니다. 나타납니다.

4. 마지막으로 아이디어에 대해 이야기해 보겠습니다.

먼저 중앙은 흰색, 양쪽은 회색으로 그라데이션 배경색을 설정합니다.

두 번째로 텍스트 채우기 색상을 투명하게 설정합니다(흰색 배경만 가능).

다음으로 텍스트를 추가합니다. 외부 배경색이 잘립니다(텍스트만 표시됨).

마지막으로 @keyframes를 사용하여 흰색 배경 위치를 왼쪽에서 오른쪽으로 순환합니다.

위 내용은 CSS3를 사용하여 오른쪽으로 반복되는 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.