CSS3 implements 10 loading effect methods

高洛峰
Release: 2017-03-07 15:01:19
Original
1764 people have browsed it

Using CSS3 to achieve several common Loading effects, although it is very simple, I still share it, and take notes by the way...

The first effect:

CSS3 implements 10 loading effect methods

The code is as follows:

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>
Copy after login
Copy after login
Copy after login
.loading{   
            width: 80px;   
            height: 40px;   
            margin: 0 auto;   
            margin-top:100px;   
        }   
        .loading span{   
            display: inline-block;   
            width: 8px;   
            height: 100%;   
            border-radius: 4px;   
            background: lightgreen;   
            -webkit-animation: load 1s ease infinite;   
        }   
        @-webkit-keyframes load{   
            0%,100%{   
                height: 40px;   
                background: lightgreen;   
            }   
            50%{   
                height: 70px;   
                margin: -15px 0;   
                background: lightblue;   
            }   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.2s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.4s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.6s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.8s;   
        }
Copy after login


The second effect:

CSS3 implements 10 loading effect methods

The code is as follows:

<p class="loading">  
        <span></span>  
</p>
Copy after login
.loading{   
            width: 150px;   
            height: 4px;   
            border-radius: 2px;   
            margin: 0 auto;   
            margin-top:100px;   
            position: relative;   
            background: lightgreen;   
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
        }   
        .loading span{   
            display: inline-block;   
            width: 16px;   
            height: 16px;   
            border-radius: 50%;   
            background: lightgreen;   
            position: absolute;   
            margin-top: -7px;   
            margin-left:-8px;   
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
        }   
        @-webkit-keyframes changeBgColor{   
            0%{   
                background: lightgreen;   
            }   
            100%{   
                background: lightblue;   
            }   
        }   
        @-webkit-keyframes changePosition{   
            0%{   
                background: lightgreen;   
            }   
            100%{   
                margin-left: 142px;   
                background: lightblue;   
            }   
        }
Copy after login



##The 3rd to 5th effects:

CSS3 implements 10 loading effect methods

CSS3 implements 10 loading effect methods

CSS3 implements 10 loading effect methods##The code is as follows:

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>
Copy after login
Copy after login
Copy after login


The css styles of the 3rd to 5th effects are:

.loading{   
            width: 150px;   
            height: 15px;   
            margin: 0 auto;   
            position: relative;   
            margin-top:100px;   
        }   
        .loading span{   
            position: absolute;   
            width: 15px;   
            height: 100%;   
            border-radius: 50%;   
            background: lightgreen;   
            -webkit-animation: load 1.04s ease-in infinite alternate;   
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
                -webkit-transform: translate(0px);   
            }   
            100%{   
                opacity: 0.2;   
                -webkit-transform: translate(150px);   
            }   
        }   
        .loading span:nth-child(1){   
            -webkit-animation-delay:0.13s;   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.26s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.39s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.52s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.65s;   
        }
Copy after login


##The 6th to 8th effects:

CSS3 implements 10 loading effect methods

CSS3 implements 10 loading effect methods

The code is as follows: CSS3 implements 10 loading effect methods

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>
Copy after login
Copy after login
Copy after login

#6 -The css styles of the 8 effects are:

.loading{   
            width: 150px;   
            height: 15px;   
            margin: 0 auto;   
            margin-top:100px;   
            text-align: center;   
        }   
        .loading span{   
            display: inline-block;   
            width: 15px;   
            height: 100%;   
            margin-right: 5px;   
            background: lightgreen;   
            -webkit-animation: load 1.04s ease infinite;   
        }   
        .loading span:last-child{   
            margin-right: 0px;    
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
            }   
            100%{   
                opacity: 0;   
            }   
        }   
        .loading span:nth-child(1){   
            -webkit-animation-delay:0.13s;   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.26s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.39s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.52s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.65s;   
        }
Copy after login


The 9th-10th effects:

CSS3 implements 10 loading effect methods

The code is as follows: CSS3 implements 10 loading effect methods

<p class="loadEffect">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>
Copy after login

The CSS styles are:

.loadEffect{   
            width: 100px;   
            height: 100px;   
            position: relative;   
            margin: 0 auto;   
            margin-top:100px;   
        }   
        .loadEffect span{   
            display: inline-block;   
            width: 16px;   
            height: 16px;   
            border-radius: 50%;   
            background: lightgreen;   
            position: absolute;   
            -webkit-animation: load 1.04s ease infinite;   
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
            }   
            100%{   
                opacity: 0.2;   
            }   
        }   
        .loadEffect span:nth-child(1){   
            left: 0;   
            top: 50%;   
            margin-top:-8px;   
            -webkit-animation-delay:0.13s;   
        }   
        .loadEffect span:nth-child(2){   
            left: 14px;   
            top: 14px;   
            -webkit-animation-delay:0.26s;   
        }   
        .loadEffect span:nth-child(3){   
            left: 50%;   
            top: 0;   
            margin-left: -8px;   
            -webkit-animation-delay:0.39s;   
        }   
        .loadEffect span:nth-child(4){   
            top: 14px;   
            rightright:14px;   
            -webkit-animation-delay:0.52s;   
        }   
        .loadEffect span:nth-child(5){   
            rightright: 0;   
            top: 50%;   
            margin-top:-8px;   
            -webkit-animation-delay:0.65s;   
        }   
        .loadEffect span:nth-child(6){   
            rightright: 14px;   
            bottombottom:14px;   
            -webkit-animation-delay:0.78s;   
        }   
        .loadEffect span:nth-child(7){   
            bottombottom: 0;   
            left: 50%;   
            margin-left: -8px;   
            -webkit-animation-delay:0.91s;   
        }   
        .loadEffect span:nth-child(8){   
            bottombottom: 14px;   
            left: 14px;   
            -webkit-animation-delay:1.04s;   
        }
Copy after login

PS: There are actually a lot of repetitions in the CSS style codes, mainly because the animations are different, but for the convenience of using them directly in the future, I won’t sort them out now.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more related articles on how to implement 10 loading effects using CSS3, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template