찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML/CSS를 사용하여 흥미롭고 역동적인 물결 모양의 텍스트 줄 만들기

HTML/CSS를 사용하여 흥미롭고 역동적인 물결 모양의 텍스트 줄 만들기

藏色散人
藏色散人원래의
2021-08-27 14:37:242356검색

이전 글에서 "매우 실용적이에요!" CSS는 버튼을 클릭했을 때 누르는 동적 효과를 구현합니다" "CSS를 사용하여 버튼을 클릭했을 때 누르는 동적 효과를 구현하는 방법을 소개합니다. 도움이 필요한 친구들은 가서 배울 수 있습니다~

이것 모두가 HTML/CSS를 사용하여 흥미롭고 역동적인 물결 모양의 텍스트 라인 효과를 만들어냅니다!

아래의 전체 코드 예제를 살펴보겠습니다. 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: rgb(74, 152, 255);
        }

        .wavy {
            position: relative;
        }

        .wavy span {
            position: relative;
            display: inline-block;
            color: #fff;
            font-size: 2em;
            text-transform: uppercase;
            animation: animate 2s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--i));
        }

        @keyframes animate {
            0% {
                transform: translateY(0px);
            }

            20% {
                transform: translateY(-20px);
            }

            40%,
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
<div class="wavy">
    <span style="--i:1">P</span>
    <span style="--i:2">H</span>
    <span style="--i:3">P</span>
    <span style="--i:4">中</span>
    <span style="--i:5">文</span>
    <span style="--i:6">网</span>
    <span style="--i:7">开</span>
    <span style="--i:8">班</span>
    <span style="--i:9">啦</span>
    <span style="--i:10">~</span>
    <span style="--i:11">快</span>
    <span style="--i:12">学</span>
    <span style="--i:13">起</span>
    <span style="--i:14">来</span>
    <span style="--i:15">~</span>
    <span style="--i:16">~</span>
    <span style="--i:17">~</span>

</div>
</body>
</html>

효과는 다음과 같습니다.

GIF 2021-8-27 星期五 下午 2-30-58.gif

위 코드를 직접 복사하여 로컬에서 데모를 실행할 수 있습니다.

다음은 몇 가지 주요 속성입니다.

  • text-transform 속성은 텍스트의 대소문자를 제어합니다.

  • animation 속성은 약식 속성입니다. 

animation-name：规定需要绑定到选择器的 keyframe 名称。。    
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。    
animation-timing-function：规定动画的速度曲线。    
animation-delay：规定在动画开始之前的延迟。    
animation-iteration-count：规定动画应该播放的次数。    
animation-direction：规定是否应该轮流反向播放动画。

  • Animation은 @keyframes 규칙을 통해 생성될 수 있습니다. 

语法：@keyframes animationname {keyframes-selector {css-styles;}}
参数animationname必需：定义动画的名称。
参数keyframes-selector必需：动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
参数css-styles必需：一个或多个合法的 CSS 样式属性。

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

위 내용은 HTML/CSS를 사용하여 흥미롭고 역동적인 물결 모양의 텍스트 줄 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：html+css를 사용하여 캐러셀 효과(코드 공유)를 얻는 방법을 단계별로 가르쳐줍니다.다음 기사：html+css를 사용하여 캐러셀 효과(코드 공유)를 얻는 방법을 단계별로 가르쳐줍니다.

관련 기사

더보기