초급 기사: CSS3를 사용하여 러브 로딩을 만드는 방법(자세한 코드 설명)

이전 글 "CSS를 사용하여 사실적인 물 파급 효과를 만드는 방법을 단계별로 가르쳐주세요(코드 포함) "에서는 CSS를 사용하여 사실적인 물 파급 효과를 만드는 방법을 소개했습니다. 다음 기사에서는 CSS3를 사용하여 러브 로딩을 만드는 방법을 소개합니다.

웹 페이지에는 이러한 CSS3 사랑 로드가 종종 있습니다. 렌더링을 본 후 이를 구현하는 방법을 연구하고 html+css 이미지 및 텍스트 레이아웃의 기본 프로세스를 설명하겠습니다. .

효과는 다음과 같습니다

1. 먼저 새 HTML 파일을 만들고 9개의 div 태그를 정의합니다. div标签。

<div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>

2、开始定义css样式来进行修饰添加background-color属性设置背景颜色，宽度设置为100%，高度设置为100%，margin属性设置所有外边距属性。

body {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #ccc;
    }

3、container标题文本样式，利用align-items属性居中对齐。

  .container {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

4、header标题文本样式，利用position属性指定一个元素定位。

.header {
        position: relative;
        width: 138px;
        /* display: flex; */

5、class*='header-'标题文本样式，利用position属性定位元素，语法“position: absolute;top: -5px;border-radius: 5px”生成绝对定位的元素。

 [class*='header-']{
        position: absolute;
        width: 10px;
        height: 10px;
        top: -5px;
        border-radius: 5px;
     }

6、header0-8标题文本样式，利用animation（动画）属性绑定到每8个元素，让元素摆动起来。

 .header-0,
    .header-8 {
        animation: header-0 3.2s infinite;
    }
    .header-1,
    .header-7 {
        animation: header-1 3.2s infinite;
    }
    .header-2,
    .header-6 {
        animation: header-2 3.2s infinite;
    }
    .header-3,
    .header-5 {
        animation: header-3 3.2s infinite;
    }
    .header-4 {
        animation: header-4 3.2s infinite;
    }

7、使用4个@keyframes规则，给4个创建动画逐步改变0％是开头动画，100％。

@keyframes header-0 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 30px;
        top: -10px;
    }
}
@keyframes header-1 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 60px;
        top: -31px;
    }
}
@keyframes header-2 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 80px;
        top: -37px;
    }
}
@keyframes header-3 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 90px;
        top: -31px;
    }
}
@keyframes header-4 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 94px;
        top: -23px;
    }

8、header0-8标题文本样式添加animation-delay属性等待1秒然后开始动画，background

.header-0 {
    left: 0;
    animation-delay: 0s;
    background: #92fe9d;

}
.header-1 {
    left: 16px;
    animation-delay: 0.15s;
    background: #00c9ff;
}
.header-2 {
    left: 32px;
    animation-delay: 0.3s;
    background: #ff758c;
}
.header-3 {
    left: 48px;
    animation-delay: 0.45s;
    background: #ff7eb3;
}
.header-4 {
    left: 66px;
    animation-delay: 0.6s;
    background: #fa71cd;
}
.header-5 {
    left: 82px;
    animation-delay: 0.75s;
    background: #6f86d6;
}
.header-6 {
    left: 98px;
    animation-delay: 0.9s;
    background: #f9f586;
}

.header-7 {
    left: 114px;
    animation-delay: 1.05s;
    background: #b1f4cf;
}
.header-8 {
    left: 130px;
    animation-delay: 1.2s;
    background: #fef9d7;
}

2. 수정을 위한 CSS 스타일 정의를 시작합니다. 배경색을 설정하려면 background-color 속성을 ​​추가하고 너비를 100%로 설정하고 높이를 100%로 설정합니다. code>margin 속성. 모든 여백 속성.

    
    
    


    

        

            <div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>
        
    

3. 컨테이너 제목 텍스트 스타일, align-items 속성을 ​​사용하여 가운데 정렬하세요.

rrreee4. 헤더 제목 텍스트 스타일, position 속성을 ​​사용하여 요소의 위치를 ​​지정하세요.

rrreee

5. class*='header-'title 텍스트 스타일, position 속성을 ​​사용하여 요소 위치 지정, 구문은 "position:absolute;top: -5px;border- radius: 5px code>"는 절대 위치에 있는 요소를 생성합니다.

rrreee

6. Header0-8 제목 텍스트 스타일, animation(애니메이션) 속성을 사용하여 요소가 흔들리도록 8개 요소마다 바인딩합니다. rrreee7. 4개의 @keyframes 규칙을 사용하여 오프닝 애니메이션에 대해 생성된 4개의 애니메이션을 0%에서 100%까지 점진적으로 변경합니다.

rrreee🎜8. header0-8 제목 텍스트 스타일에 animation-delay 속성을 ​​추가하고 애니메이션을 시작하기 전에 1초 동안 기다립니다. 8개의 요소를 묶습니다. 🎜rrreee🎜코드 효과가 나왔습니다🎜🎜🎜🎜🎜아래 전체 코드🎜rrreee🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜

위 내용은 초급 기사: CSS3를 사용하여 러브 로딩을 만드는 방법(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!