흥미로운 텍스트 액체 채우기 효과를 얻기 위한 HTML/css-HTML 튜토리얼-php.cn

흥미로운 텍스트 액체 채우기 효과를 얻기 위한 HTML/css

藏色散人

풀어 주다： 2021-08-30 14:26:19

원래의

2367명이 탐색했습니다.

이전 글에서 "CSS를 사용하여 회전 반경을 동적으로 조정하는 방법은 무엇입니까? 》CSS를 사용하여 회전 반경을 동적으로 조정하는 효과에 대해 소개합니다. 관심 있는 친구는 이에 대해 배울 수 있습니다~

이 기사에서는 특히 흥미로운 구현 효과를 가져올 것입니다. 모두가 언급한 "텍스트 액체 채우기"에 관심이 있습니다. 제목. 효과" 혹시 아이디어가 있으신가요?

먼저 아래 그림과 같이 이 효과가 어떻게 보이는지 살펴보겠습니다.

GIF 2021-8-30 星期一下午 2-11-27.gif

전체 HTML/CSS 코드로 직접 이동해 보겠습니다.

참고: 액체 채우기 텍스트 애니메이션은 다음을 사용할 수 있습니다. CSS: :선택자가 완료되기 전에. 키프레임을 사용하여 애니메이션의 각 프레임 높이를 설정하겠습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 200px 0;
            padding: 0;
            font-size: 80px;
            position: relative;
            color: #45b1ff;
        }

        h1:before {
            content: "PHP中文网";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color:white;
            overflow: hidden;
            animation: animate 6s infinite;
        }

        @keyframes animate {
            0% {
                height: 25%;
            }
            25% {
                height: 50%;
            }
            50% {
                height: 65%;
            }
            75% {
                height: 40%;
            }
            100% {
                height: 25%;
            }
        }
    </style>

</head>

<body>
<center>
    <h1>PHP中文网</h1>
</center>
</body>

</html>

로그인 후 복사

이 코드를 실행했을 때의 효과는 위 그림과 같습니다.

이 효과를 얻으려면 CSS의 :before 선택기와 @keyframes 규칙에 익숙해야 합니다.

:선택기 전:

:선택기가 선택한 요소의 내용 앞에 내용을 삽입하기 전 내용 속성을 사용하여 삽입할 내용을 지정하려고 합니다.

참고: IE8 및 이전 버전에서는

@keyframes 규칙을 선언해야 합니다.

@keyframes 규칙을 사용하면 CSS에서 점진적으로 변경하여 애니메이션을 만들 수 있습니다. 스타일이 다른 스타일로 설정되었습니다. 애니메이션 중에 CSS 스타일 설정을 여러 번 변경할 수 있습니다. % 또는 0% ~ 100%와 동일한 키워드 "from" 및 "to"를 사용하여 변경이 발생하는 시기를 지정합니다. 0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 종료되는 시점입니다. 최상의 브라우저 지원을 위해 항상 0%와 100%에 대한 선택기를 정의해야 합니다.

참고: 애니메이션 속성을 사용하여 애니메이션의 모양을 제어하고 선택기를 사용하여 애니메이션을 바인딩합니다.

PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. "css 비디오 튜토리얼"과 "HTML 비디오 튜토리얼"을 배우는 것을 환영합니다!

위 내용은 흥미로운 텍스트 액체 채우기 효과를 얻기 위한 HTML/css의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!