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

    代码:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{
        position: relative;
        width: 40px;
        height: 40px;
        margin: 100px;
    }
    #box span{
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 0;
        background-color: #9b59b6;
    }
    #box span:nth-child(1){-webkit-animation:preloader1 1.5s infinite ease-in-out;}
    #box span:nth-child(2){-webkit-animation:preloader2 1.5s infinite ease-in-out;left: 20px;}
    #box span:nth-child(3){-webkit-animation:preloader3 1.5s infinite ease-in-out;top: 0px;}
    #box span:nth-child(4){-webkit-animation:preloader4 1.5s infinite ease-in-out;top: 0px;left: 20px;}
    @-webkit-keyframes preloader1{
        0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;}
        50%{transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius: 20px;background-color: #3498db;}
        80%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
        100%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-webkit-keyframes preloader2{
        0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;}
        50%{transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius: 20px;background-color: #f1c40f;}
        80%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
        100%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
    }
    @-webkit-keyframes preloader3{
        0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;}
        50%{transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius: 20px;background-color: #2ecc71;}
        80%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
        100%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-webkit-keyframes preloader4{
        0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;}
        50%{transform:translateX(20px) translateY(10px) rotate(180deg);border-radius: 20px;background-color: #e74c3c;}
        80%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
        100%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
    }
    </style>
    </head>
    <body>
        <div id="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
    </html>

    效果图:

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    微信二维码 场景二维码 用于推送事件,关注等 注册用户 ,经过测试
    简单的 Helper 封装 -- CookieHelper
    简单的 Helper 封装 -- SecurityHelper 安全助手:封装加密算法(MD5、SHA、HMAC、DES、RSA)
    Java反射机制
    Windows Azure Web Site (13) Azure Web Site备份
    Windows Azure Virtual Machine (1) IaaS用户手册
    Windows Azure Web Site (1) 用户手册
    Windows Azure Web Site (12) Azure Web Site配置文件
    Windows Azure Web Site (11) 使用源代码管理器管理Azure Web Site
    Windows Azure Web Site (10) Web Site测试环境
  • 原文地址:https://www.cnblogs.com/baixc/p/4430366.html
Copyright © 2011-2022 走看看