CSS3의 세 가지 로딩 디자인 예제 코드 공유(2)

이 글은 CSS Loading이 디자인한 두 번째 글입니다. 사실 첫 번째 글에는 많은 내용이 포함되어 있기 때문에 이번 글에서는 속성에 대한 소개가 상대적으로 적습니다. 속성이 이해가 안 되시면 이전 글의 내용을 참고해주세요.
CSS 로딩 디자인(1)

한 번 로딩

Paste_Image.png

이렇게 하면 안 돼요. 뭐든지애니메이션 효과를 여기서 보여주려면 화면으로 영상을 녹화한 뒤 사진으로 변환해야 하는 게 너무 번거롭거든요. 혹시 쉬운 방법이 있는지 모르겠습니다. 그렇다면 알려주시기 바랍니다. 이제 이 애니메이션 효과를 만드는 방법을 살펴보겠습니다. 먼저 Html

  <p class="box">
        <p class="loader">
            <i></i>
            <i></i>
            <i></i>
      </p>
  </p>

코드를 살펴보겠습니다. 이는 두 개의

태그가 중첩되어 있음을 나타냅니다. p 코드 CSS

    .box {
        width: 100%;
        padding: 3%;
    }

    .loader {
        width: 30%;
        height: 200px;
        margin: 50px auto;
        border: 1px solid chocolate;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .loader i {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #333333;
        position: absolute;
        opacity:0;

    }

를 보면 이 코드가 첫 번째 기사의 코드와 거의 동일하다는 것을 알 수 있습니다. 실제로 다음 세 가지 효과도 디자인되었습니다. 이런 식으로 유일한 차이점은 애니메이션 디자인이 다르다는 것입니다.

    @-webkit-keyframes loading {
        0%{
            transform: scale(0);
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        100%{
            transform: scale(1);
            opacity:0;
        }
    }

이 애니메이션이 무엇을 의미하는지 설명하겠습니다.

1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0
2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态，
  但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。
3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？
  这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。

좋아, 이제 애니메이션 효과가 정의되었으므로

태그에 대해 설정해 보겠습니다. i

    .loader i:nth-child(1){
        -webkit-animation: loading 1s linear 0s infinite;
    }
    .loader i:nth-child(2){
        -webkit-animation: loading 1s linear 0.2s infinite;
    }
    .loader i:nth-child(3){
        -webkit-animation: loading 1s linear 0.4s infinite;
    }

자, 여기서 첫 번째 애니메이션 효과가 나타납니다. 직접 연습해보고 구체적인 효과를 확인하는 것이 좋습니다. 개인적으로 이 애니메이션은 꽤 멋있다고 생각합니다.

2개 불러오기

Paste_Image.png

솔직히 제가 가장 좋아하는 애니메이션 효과인데 매우 흥미롭습니다.

코드를 보세요Html

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
        </p>
    </p>
</p>

여기

코드는 위와 조금 다릅니다. 아래에서 분석해 보겠습니다.CSS

    .box {
        width: 100%;
        padding: 3%;
    }

    .loader {
        width: 30%;
        height: 200px;
        margin: 50px auto;
        border: 1px solid chocolate;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader-child {
        width: 40px;
        height: 40px;
        position: relative;
    }

    .loader-child i {
        display: block;
        border: 2px solid #333333;
        border-color: transparent #333333; 
        border-radius: 50%;
        position: absolute;
    }

    .loader-child i:first-child {
        width: 35px;
        height: 35px;
        top: 0;
        left: 0;
        -webkit-animation: loading 1s ease-in-out 0s infinite;
    }

    .loader-child i:last-child {
        width: 15px;
        height: 15px;
        top: 10px;
        left: 10px;
        -webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
    }

그런 줄이 있는 걸 알 수 있습니다. 네 번째 블록의 코드

원래는 원을 그리도록 설정되어 있었습니다. 원이 아니기 때문에 이 속성 행을 설정한 후에는 색상 속성이 1/4 호마다 변경됩니다. 즉, 투명합니다. border-color: transparent #333333; 원하는 그래픽 효과를 얻을 수 있도록 변경하세요. #333333

또한 각

태그에 i 속성을 ​​설정합니다. 이 두 속성은 top,left과 함께 사용해야 하며 설정 후 사용 방법도 소개했습니다. 이 두 가지 특성을 통해 얻을 수 있는 효과는 큰 원에 작은 원이 포함되어 있다는 것이며, 이는 그림의 효과입니다. position

애니메이션 효과에 주목하세요. 끝에 last-child를 추가했는데 이는 시계 반대 방향 실행을 의미합니다. reverse

자, 애니메이션 효과를 살펴보겠습니다

rree

위의 애니메이션 실행에 대한 저의 분석과 결합하면 이 애니메이션의 효과를 시뮬레이션할 수 있었을 것입니다. , 정말 멋진 효과네요.

3개 로드

Paste_Image.png

이 애니메이션은

에 노출되어 있어서 매우 어렵습니다. 그것도 며칠 안됐는데 왜 속성이 많이 설정되어 있는지 모르겠네요. 인터넷으로 여러 정보를 찾아봐도 아직 잘 이해가 안 가네요. 이제 제가 알고 있는 내용을 공유해 드리겠습니다. 아직 확실하지 않은 속성에 대해서는 모든 위대한 불멸자들이 나에게 가르쳐 주기를 바랍니다. 이전과 동일합니다. CSS

    @-webkit-keyframes loading {

        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }

HTML 여기에는 주로 사용에 협력하기 위한 추가 레이어가 포함되어 있음을 분명히 알 수 있습니다.

속성의

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </p>
    </p>
</p>

p현재 5개의 position 태그가 있지만 예상되는 5개가 아닌 원 하나만 볼 수 있습니다. 이런 일이 발생합니까? 나도 잘 모르겠다.

애니메이션 효과를 살펴보겠습니다irree

    .box{
        width: 100%;
        padding: 3%;
    }

    .loader{
        width:30%;
        height: 200px;
        border: 1px solid chocolate;
        box-sizing: border-box;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader-child{
        width: 80px;
        height: 20px;
        position: relative;
    }

    .loader-child i{
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #333333;
        margin-right: 10px;
        position: absolute;
    }

다음은 각 요소에 대한 애니메이션 효과를 설정하는 것입니다

    @-webkit-keyframes loading {
        0%{
            left: 100px;
            top: 0;
        }
        80%{
            left:0;
            top:0;
        }
        85%{
            left:0px;
            top:-20px;
            width: 20px;
            height: 20px;
        }
        90%{
            width: 40px;
            height: 20px;
        }
        95%{
            left: 100px;
            top: -20px;
            width: 20px;
            height: 20px;
        }
        100%{
            left: 100px;
            top:0;
        }
    }

그렇습니다. 피드백을 환영합니다. 서로에게서 배우십시오.

【관련 추천】

1.

무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

위 내용은 CSS3의 세 가지 로딩 디자인 예제 코드 공유(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!