Share the example code of 3 Loading designs in CSS3 (1)-CSS Tutorial-php.cn

Recently I am studying the <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> series of courses, which cover a lot of content. Although the content is very simple and easy to understand, it is very difficult to remember, such as CSS3 Some properties of . The CSS3 Loading Animation I will introduce today is also the content introduced in Geek Academy. Interested students can also go and watch the video.

Loading one

Share the example code of 3 Loading designs in CSS3 (1)

##demo01.gif

The first kind of loading animation effect is like this picture. Turning around, let's take a look at the code.

First, let’s define the

HTML code. For convenience, I only paste the core code here

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

Copy after login

pWe use below i tag, don’t ask why, you can also change it to p tag or any other tag. Let’s use CSS to modify our 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;
}

Copy after login

Here is an explanation,

margin: 50px auto; In this line, add up and downThe outer margins are set to 50px, and the left and right margins are set to auto, so that our elements can be horizontally centered.

And what does

box-sizing: border-box here mean? We set the width to 30% of the parent element, and we set a border. Does the size occupied by this border count in the width of the current element? The value we set here is the description. Plus the size occupied by the border, the current element occupies 30% of the parent element.

display,align-items,justify-content These three attributes are to place the content in the i tag in the middle of p . First use the display attribute to set p to a flexible box element, then use align-items to set the element to be centered on the vertical axis, justify-content Set the element to be centered on the horizontal axis. Note that the centering effect must be effective when these three elements exist at the same time, because the latter two attributes are dependent on the first attribute.

 .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;
    }

Copy after login

Look at the

background attribute, which sets a linear gradient effect. The parameters are also new to me and I can’t understand. I don’t understand why it is written like this. In fact, it can be understood this way. From 0% to 70% are set to transparent, from 70% to 100% are set to #699, In this way we see the image in the above Picture.

-webkit-animation The attribute specifies an animation for the current element. The first parameter is the name of the animation, which is loading. This animation requires us to You have to define it yourself. The specific definition will be introduced below. The second parameter is the duration of the animation, the third parameter is the speed curve of the animation, the fourth parameter is the animation delay time, and the fifth parameter is the number of times the animation plays. Let’s take a look at our own defined animation

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

Copy after login

It is very easy to understand, which is to rotate elements at different stages of animation. It is worth noting that this definition method can only see the animation effect in the

Chrome and Safari browsers, so if we want to also display the animation effect in the Firefox browser, Then we need to define it this way.

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

Copy after login

When quoting -moz-animation: loading-moz 1s linear 0s infinite; is almost the same, just changing the head (as for other How to define it in the browser, try it yourself).

Loading two

Share the example code of 3 Loading designs in CSS3 (1)
##demo02.gif

The effect of this animation is that the five stripes swing like waves. Let’s write such an effect below. The first is

HTML

, no suspense, very simple layout<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;"><p class="box"> <p class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </p> </p></pre><div class="contentsignin">Copy after login</div></div>In fact, almost all the

CSS

codes for this effect are consistent with the above, let’s take a look<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">* { 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; }</pre><div class="contentsignin">Copy after login</div></div>The only extra line of code here is the

margin-right

attribute in .loader i. Why is there such an extra line? Because we have 5 i tags, if there is no attribute setting in this line, all the tags will overlap. The next step is to set the animation effect.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">@-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; }</pre><div class="contentsignin">Copy after login</div></div><p>可见我们设置的动画效果就是在 <code>50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下

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

Copy after login

Loading Three

Share the example code of 3 Loading designs in CSS3 (1)

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>

Copy after login

看看 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;
    }

Copy after login

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

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

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

Copy after login

知道了意思，再来分析以上的代码，我们在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;
}

Copy after login

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

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

Copy after login

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;

Copy after login

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

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

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

The above is the detailed content of Share the example code of 3 Loading designs in CSS3 (1). For more information, please follow other related articles on the PHP Chinese website!