CSS를 사용하여 텍스트를 스크롤하는 예제 코드

이 글의 내용은 CSS 스크롤 텍스트의 예시 코드입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

Rendering

사진 설명: 화살표가 흰색으로 표시된 부분을 가리킵니다. 배경, 왼쪽에서 오른쪽으로 스크롤합니다. (IE에는 적용되지 않음)

code

html

<div>   
例子：
<div>
<span>滚动的文字，我是滚动的文字</span>
</div>
</div>

CSS

.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}

구현 원칙# 🎜🎜#

1. 애니메이션 효과

@-webkit-keyframes

이 애니메이션에서는 배경 위치가 변경됩니다(텍스트 위치 참고)

# 🎜 🎜#2. 배경을 전체가 아닌 텍스트로 선택하는 이유는 무엇인가요?

background-clip: text;
作用：指定绘图区的背景
除了text外，还包括 ：border-box|padding-box|content-box;三个属性

3. 작은 변화 효과를 얻으려면?

gradient()

기능: 그라데이션

실제 효과로 보면 흰색 부분의 바깥쪽이 회색에 가까울수록 더 하얗게 되는 것을 알 수 있습니다.

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

설명: 그라데이션 유형, 선형 그라데이션(z=x*y)

왼쪽:

그라디언트를 오른쪽에서 왼쪽으로 설정합니다. 해당 항목: 270deg
오른쪽:
은 그라데이션을 왼쪽에서 오른쪽으로 설정합니다. 해당 항목: 90deg
위로:
그라데이션을 아래에서 위로 설정합니다. 0deg
to Bottom과 동일:
은 위에서 아래로 그라데이션을 설정합니다. 에 해당: 180deg. 이는 기본값이며 공백으로 두는 것과 같습니다.


이렇게 해서 그라데이션 글꼴 부분이 구현됩니다

-webkit-text-fill-color: transparent;

글꼴 채우기 색상 : 상속되고 배경이므로 글꼴 색상은 세트박스의 배경이 됩니다 -텍스트, 상자의 배경색이 아닙니다.

애니메이션을 추가하고 루프 내에서 움직이기만 하면 됩니다.

위 내용은 CSS를 사용하여 텍스트를 스크롤하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!