CSS3에서 디자인 로딩 3가지 예시 코드 공유 (1)

최근에는 내용이 많은 <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> 시리즈를 공부하고 있는데 내용은 매우 간단하고 이해하기 쉽지만 일부 CSS3 속성과 같이 기억하기가 매우 어렵습니다. 의 . 오늘 소개해드릴 CSS3 Loading 애니메이션 역시 긱아카데미에서 소개하는 콘텐츠입니다. 관심 있는 학생들도 가서 시청하실 수 있습니다.

Loading one

demo01.gif

첫 번째 로딩 애니메이션 효과는 이 사진과 같습니다. 코드를 살펴보세요.

먼저 HTML 코드를 정의하겠습니다. 편의상 여기에 핵심 코드만 붙여넣습니다.

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

p 아래에서는 i 태그를 사용합니다. , you also p 태그나 다른 태그로 대체할 수 있습니다. CSS을 사용하여 Html

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

를 수정하겠습니다. 여기서 설명하겠습니다. margin: 50px auto;의 이 줄에서 위쪽 및 아래쪽 여백 을 50px으로 설정하고 auto의 왼쪽 및 오른쪽 여백을 사용하면 요소를 가로로 중앙에 배치하는 목적을 달성할 수 있습니다.

그럼 box-sizing: border-box은 무슨 뜻인가요? 너비를 상위 요소의 30%로 설정하고 테두리를 설정했습니다. 이 테두리가 차지하는 크기가 현재 요소의 너비에 포함되나요? 여기서 설정한 값은 테두리가 차지하는 크기에 더해 현재 요소가 상위 요소의 30%를 차지합니다.

display,align-items,justify-content 이 세 가지 속성은 i 중앙의 p 태그에 내용을 배치하는 것입니다. 먼저 display 속성을 ​​사용하여 p을 유연한 상자 요소로 설정한 다음 align-items를 사용하여 요소를 세로 축의 중앙에 배치하고 justify-content을 사용하여 요소를 가로 축의 가운데에 배치합니다. . 후자의 두 속성은 첫 번째 속성에 종속되기 때문에 이 세 가지 요소가 동시에 존재할 때 센터링 효과가 효과적이어야 합니다.

 .loading i {
        width: 35px;
        height: 35px;
        position: relative;
        display: block;
        border-radius: 50%;
        background: linear-gradient(transparent 0%, transparent 50%,
                #699 50%, #699 100%);
        -webkit-animation: loading 1s linear 0s infinite;
    }

선형 그래디언트 효과를 설정하는 background 속성을 ​​보세요. 매개변수도 처음 사용하는 사람에게는 이해할 수 없는 부분입니다. 실제로 이렇게 이해하면 0%부터 70%까지 투명하게 설정되고 70%부터 100%까지 #699로 설정되므로 위의 사진.

속성은 현재 요소에 대한 애니메이션을 지정합니다. 첫 번째 매개변수는 애니메이션의 이름으로, 이 애니메이션은 직접 정의해야 합니다. 아래에. 두 번째 매개변수는 애니메이션 지속 시간, 세 번째 매개변수는 애니메이션 속도 곡선, 네 번째 매개변수는 애니메이션 지연 시간, 다섯 번째 매개변수는 애니메이션 재생 횟수입니다. 우리가 정의한 애니메이션 -webkit-animation

@-webkit-keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

loading를 살펴보겠습니다. 이는 애니메이션의 다양한 단계에서 요소의 회전을 보여줍니다. 이 정의 방법은

및

브라우저에서만 애니메이션 효과를 볼 수 있으므로 주목할 가치가 있으므로 Firefox 브라우저에서도 애니메이션 효과를 표시하려면 다음과 같이 정의해야 합니다. Chrome

 @-moz-keyframes  loading-moz{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
 }

Safari

가

을 지칭할 때 는 헤더만 바꾸면 거의 똑같습니다(다른 브라우저에서 정의하는 방법은 직접 해보세요). -moz-animation: loading-moz 1s linear 0s infinite;Loading two

demo02.gif

이 애니메이션의 효과는 다섯 개의 줄무늬가 파도처럼 흔들리는 것입니다. 아래에 그러한 효과를 적어보겠습니다. 첫 번째는

인데, 아무런 서스펜스도 없이 아주 단순한 레이아웃

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

HTML입니다. 실제로 이 효과를 적용한 거의 모든

코드는 위와 일치합니다.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

.loading i {
    position: relative;

    width: 6px;
    height: 32px;
    margin-right: 6px;

    border-radius: 3px;
    background-color: #699;
}

여기 유일한 추가 코드 줄은 CSS의

속성입니다. 왜 그런 추가 줄이 있습니까?

태그가 5개 있으므로 이 줄에 속성 설정이 없으면 모든 태그가 겹칩니다. 다음 단계는 애니메이션 효과를 설정하는 것입니다..loader i

@-webkit-keyframes loading {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

.loading i:first-child {
    -webkit-animation: loading 1s linear .1s infinite;
}

.loading i:nth-child(2) {
    -webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
    -webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
    -webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
    -webkit-animation: loading 1s linear .5s infinite;
}

可见我们设置的动画效果就是在 50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的 动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下

linear  动画从头到尾的速度是相同的。
ease    默认。动画以低速开始，然后加快，在结束前变慢。 
ease-in 动画以低速开始。    
ease-out    动画以低速结束。
ease-in-out 动画以低速开始和结束。

Loading Three

demo03.gif

这次要做的效果是动态转圈加载的效果，下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别，这里多了一个 p 标签，目的是让画出的图形能够居中。

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

看看 CSS 代码

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

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

    .loading {
        position: relative;
    }

    .loading i {
        display: block;
        width: 15px;
        height: 15px;
        background-color: #333333;
        border-radius: 50%;
        position: absolute;
    }

要理解为什么这些代码会画出如图所示的图形，那么我们必须要对 position 属性有一个透彻的了解，首先我们来看看我们用到的两个属性值是什么意思.

absolute    
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
  生成相对定位的元素，相对于其正常位置进行定位。
  因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

知道了意思，再来分析以上的代码，我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起，所以这个时候loading 实际上为中心的一个点，然后我们将 i 标签设置为绝对定位，也就是围绕着这个点进行画圆即可。下面来看看画圆的代码

.loading i:nth-child(1) {
    top: 25px;
    left: 0px;
}

.loading i:nth-child(2) {
    top: 17px;
    left: 17px;
}

.loading i:nth-child(3) {
    top: 0px;
    left: 25px;
}

.loading i:nth-child(4) {
    top: -17px;
    left: 17px;
}

.loading i:nth-child(5) {
    top: -25px;
    left: 0px;
}

.loading i:nth-child(6) {
    top: -17px;
    left: -17px;
}

.loading i:nth-child(7) {
    top: 0px;
    left: -25px;
}

.loading i:nth-child(8) {
    top: 17px;
    left: -17px;
}

看到这些代码，如果你不知道为什么这样能够画出一个圆，那么拿出草稿纸，画一个坐标轴，将上述代码中的 top 值作为 y 轴的值，将 left 的值作为 x 轴的值，就可以看到为什么这么书写代码了。好了，静态图像已经书写完毕，那么接下来就是定义动画的时间了

  @-webkit-keyframes loading {
        50%{
            transform: scale(0.4);
            opacity: 0.3;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果，从上到下依次为

 -webkit-animation: loading 1s ease 0s infinite;
 -webkit-animation: loading 1s ease 0.12s infinite;
 -webkit-animation: loading 1s ease 0.24s infinite;
 -webkit-animation: loading 1s ease 0.36s infinite;
 -webkit-animation: loading 1s ease 0.48s infinite;
 -webkit-animation: loading 1s ease 0.60s infinite;
 -webkit-animation: loading 1s ease 0.72s infinite;
 -webkit-animation: loading 1s ease 0.84s infinite;

这个时候如果运行，你会发现好像是逆时针旋转的，如果想改成顺时针旋转，可以将延迟时间前面都加上负号。好了，今天先介绍这三种加载效果，如果书写有错误，欢迎反馈交流。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

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