zoukankan      html  css  js  c++  java
  • CSS3特效(1)——loading效果

    效果一:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .loading{
                 80px;
                height: 40px;
                margin: 0 auto;
                margin-top:100px;
            }
            .loading span{
                display: inline-block;
                 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;
            }
        </style>
    </head>
    <body>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    </body>
    </html>
    

    效果二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .loadEffect{
                 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .loadEffect span{
                display: inline-block;
                 20px;
                height: 20px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{
                0%{
                    -webkit-transform: scale(1.2);
                    opacity: 1;
                }
                100%{
                    -webkit-transform: scale(.3);
                    opacity: 0.5;
                }
            }
            .loadEffect span:nth-child(1){
                left: 0;
                top: 50%;
                margin-top:-10px;
                -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: -10px;
                -webkit-animation-delay:0.39s;
            }
            .loadEffect span:nth-child(4){
                top: 14px;
                right:14px;
                -webkit-animation-delay:0.52s;
            }
            .loadEffect span:nth-child(5){
                right: 0;
                top: 50%;
                margin-top:-10px;
                -webkit-animation-delay:0.65s;
            }
            .loadEffect span:nth-child(6){
                right: 14px;
                bottom:14px;
                -webkit-animation-delay:0.78s;
            }
            .loadEffect span:nth-child(7){
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                -webkit-animation-delay:0.91s;
            }
            .loadEffect span:nth-child(8){
                bottom: 14px;
                left: 14px;
                -webkit-animation-delay:1.04s;
            }
        </style>
    </head>
    <body>
    <div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    初级工程师该如何去学习,如何去研发开关电源?
    CentOS-pam认证机制简介
    Linux-密码复杂度限制
    如何写一个简单的webserver(一):最简实现
    MySQL5.6绿色版安装(mysql-5.6.24-winx64.zip)
    Linux忘记roo密码的解决办法
    Linux中的netstat命令详解
    WireShark抓包分析(二)
    Wireshark抓取TCP包分析
    Wireshark 基本介绍和学习 TCP 三次握手
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605544.html
Copyright © 2011-2022 走看看