HTML에서 스크롤 텍스트 효과를 얻는 방법-HTML 튜토리얼-php.cn

HTML에서 스크롤 텍스트 효과를 얻는 방법

青灯夜游

풀어 주다： 2023-01-06 11:14:13

원래의

16201명이 탐색했습니다.

HTML에서는 marquee 태그를 사용하여 스크롤 텍스트 효과를 얻을 수 있습니다. 이 태그는 스크롤 텍스트를 문서에 삽입할 수 있습니다. 구문 형식은 "텍스트입니다. 스크롤됩니다"; 선택 윤곽 태그의 속성은 텍스트가 컨테이너 가장자리에 도달할 때 발생하는 상황을 제어하는 데 사용됩니다.

HTML에서 스크롤 텍스트 효과를 얻는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

marquee 스크롤 텍스트 라벨

페이지에는 동적 텍스트, 동적 이미지, 오디오 및 비디오 등과 같은 많은 멀티미디어 요소가 있으며 가장 간단한 것은 HTML의 경우 하늘 높이 스크롤되는 텍스트입니다. 스크롤 텍스트를 추가하려면 marquee 태그를 사용해야 합니다. marquee标签。
我们先来看一下最简单的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
    </head>

    <body style="background: black;padding: 20px;">
        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>
    </body>
</html>

로그인 후 복사

为了显示效果更明显，这里将页面背景设置为黑色，将滚动文字设置为白色，显示效果如图：

HTML에서 스크롤 텍스트 효과를 얻는 방법

这样我们就实现了一个最简单的滚动文字，在滚动文字中还有一些属性用于控制滚动方向、滚动速度等，下面我们就来看一下几个比较常用的属性。

direction 滚动方向属性

默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：up，down，left，right，分别表示向上、向下、向左和向右滚动。

示例如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee direction="up">UP</marquee>
        <marquee direction="down">DOWN</marquee>
        <marquee direction="left">LEFT</marquee>
        <marquee direction="right">RIGHT</marquee>
    </body>

</html>

로그인 후 복사

HTML에서 스크롤 텍스트 효과를 얻는 방법

behavior 滚动方式属性

通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate가장 간단한 예를 먼저 살펴보겠습니다.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee behavior="scroll">scroll</marquee>
        <marquee behavior="slide">slide</marquee>
        <marquee behavior="alternate">alternate</marquee>
    </body>

</html>

로그인 후 복사

디스플레이 효과를 더 명확하게 하기 위해 여기에서는 페이지 배경을 검은색으로 설정하고 스크롤 텍스트를 흰색으로 설정했습니다.

여기에 사진 설명을 쓰세요 HTML에서 스크롤 텍스트 효과를 얻는 방법

여기에 가장 간단한 스크롤 텍스트를 구현했으며, 스크롤 텍스트에는 스크롤 방향, 스크롤 속도 등을 제어하는 데 사용되는 몇 가지 속성도 있습니다. 더 일반적으로 사용되는 속성 중 일부를 살펴보겠습니다.

방향 스크롤 방향 속성

기본적으로 텍스트는 오른쪽에서 왼쪽으로 스크롤됩니다. 실제 애플리케이션에서는 방향을 변경해야 할 수도 있으므로 이를 통해 설정할 수 있습니다. 이 속성에 사용할 수 있는 값은 up, down, left, right입니다. 위쪽, 아래쪽, 위쪽으로 스크롤합니다.

예제는 다음과 같습니다:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>
    </body>

</html>

로그인 후 복사

이미지 쓰기 설명은 여기에 HTML에서 스크롤 텍스트 효과를 얻는 방법

행동 스크롤 모드 속성

스크롤 모드는 왕복 운동 등의 동작을 통해 설정할 수 있습니다. 동작에 사용할 수 있는 값은 `scroll`, `slide` 및 `alternate`이며 각각 순환 스크롤, 한 번만 스크롤한 후 중지를 나타냅니다. 앞뒤로 교대로 스크롤합니다.

예는 다음과 같습니다:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee loop="2">Welcom CSDN!</marquee>
    </body>

</html>

로그인 후 복사

scrolldelay 스크롤 지연 속성 및 스크롤 양 스크롤 속도 속성

🎜🎜scrolldelay 속성은 텍스트 스크롤의 시간 간격을 설정하는 데 사용할 수 있습니다. 스크롤 지연의 시간 간격 단위는 밀리초입니다. 이 시간 간격은 두 스크롤 단계 사이의 시간 간격으로 설정됩니다. 시간이 너무 길면 정지 및 이동 효과가 발생합니다. 🎜scrollamount는 스크롤 단계 크기를 설정하는 데 사용됩니다. 🎜예는 다음과 같습니다: 🎜rrreee🎜🎜🎜🎜🎜loop 스크롤 루프 속성🎜🎜🎜몇 번 후에 텍스트 스크롤을 중지하려면 루프 속성을 사용할 수 있습니다. 🎜🎜예는 다음과 같습니다: 🎜rrreee🎜추천 튜토리얼: "🎜html 비디오 튜토리얼🎜"🎜

위 내용은 HTML에서 스크롤 텍스트 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!