zoukankan      html  css  js  c++  java
  • css3 loading 效果3

    代码:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{position: relative;margin: 100px;}
    #box span{
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: #3498db;
        opacity: 0.5;
        border-radius: 50%;
        -webkit-animation:preloader 1s infinite ease-in-out;
    }
    #box span:nth-child(2){left: 20px;-webkit-animation-delay:0.2s;}
    #box span:nth-child(3){left: 40px;-webkit-animation-delay:0.4s;}
    #box span:nth-child(4){left: 60px;-webkit-animation-delay:0.6s;}
    #box span:nth-child(5){left: 80px;-webkit-animation-delay:0.8s;}
    @-webkit-keyframes preloader{
        0%{opacity: 0.3;-webkit-transform:translateY(0px);box-shadow: 0px 0px 3px rgba(0,0,0,0.1);}
        50%{opacity: 1;-webkit-transform:translateY(-10px);box-shadow: 0px 20px 3px rgba(0,0,0,0.05);background-color: #f1c40f;}
        100%{opacity: 0.3;-webkit-transform:translateY(0px);box-shadow: 0px 0px 3px rgba(0,0,0,0.1);}
    }
    </style>
    </head>
    <body>
        <div id="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
    </html>

    效果图:

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    react特点和创建虚拟DOM
    vue的keep-alive
    JavaScript-事件委托
    vue-router参数传递
    js常用的字符串处理
    vue-vuex
    vue-组件
    vue-父子组件传值
    堆和栈
    js-深拷贝浅拷贝
  • 原文地址:https://www.cnblogs.com/baixc/p/4430434.html
Copyright © 2011-2022 走看看