css实现loading图标（2）

最新推荐文章于 2023-04-25 11:56:51 发布
最新推荐文章于 2023-04-25 11:56:51 发布
阅读量225 收藏
点赞数
分类专栏： css技巧

这里写图片描述
效果一：

<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-01</title>  
</head>  
<body>  
    <style>  
    body {  
        text-align: center;   
        overflow: hidden;  
        padding: 50px;  
    }  
    .csshub-loader{  
        position: relative;  
        width: 80px;  
        height: 80px;  
        top: 28%;  
        top: -webkit-calc(50% - 43px);  
        top: calc(50% - 43px);  
        left: 35%;  
        left: -webkit-calc(50% - 43px);  
        left: calc(50% - 43px);  
        border-radius: 50px;  
        background-color: rgba(231, 76, 60, 0.1);  
        border-width: 40px;  
        border-style: double;  
        border-color:transparent   #e74c3c;  
        -webkit-box-sizing:border-box;  
        -moz-box-sizing:border-box;  
        box-sizing:border-box;  
        -webkit-transform-origin:  50% 50%;  
        transform-origin:  50% 50% ;  
        -webkit-animation: csshub-animate 2s linear infinite;  
        animation: csshub-animate 2s linear infinite;  
    }   
    @-webkit-keyframes csshub-animate{  
        0%{-webkit-transform:rotate(0deg);}  
        100%{-webkit-transform:rotate(360deg);}  
    }  
    @keyframes csshub-animate{  
        0%{transform:rotate(0deg);}  
        100%{transform:rotate(360deg);}  
    }  
    </style>  
    <div class="csshub-loader"></div>  
</body>  
</html>  


效果二：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-02</title>  
</head>  
<body>  
<style>  
    body {  
        background: #ccc;  
        padding: 100px;  
    }  
    .csshub-loading {  
        width: 50px;  
        height: 50px;  
        position: relative;  
    }  
    .csshub-loading:before {  
        content: '';  
        width: 50px;  
        height: 5px;  
        background: #000;  
        opacity: 0.1;  
        position: absolute;  
        top: 59px;  
        left: 0;  
        border-radius: 50%;  
        animation: csshub-shadow .5s linear infinite;  
        -webkit-animation:  csshub-shadow .5s linear infinite;  
    }  
    .csshub-loading:after {  
        content: '';  
        width: 50px;  
        height: 50px;  
        background: #1A6844;  
        animation: csshub-animate .5s linear infinite;  
        -webkit-animation: csshub-animate .5s linear infinite;  
        position: absolute;  
        top: 0;  
        left: 0;  
        border-radius: 3px;  
    }  
    @keyframes csshub-animate {  
        17% {  
            border-bottom-right-radius: 3px;  
        }  
        25% {  
        transform: translateY(9px) rotate(22.5deg);  
            }  
        50% {  
            transform: translateY(18px) scale(1, 0.9) rotate(45deg);  
            border-bottom-right-radius: 40px;  
        }  
        75% {  
            transform: translateY(9px) rotate(67.5deg);  
        }  
        100% {  
            transform: translateY(0) rotate(90deg);  
        }  
    }  
    @-webkit-keyframes csshub-animate {  
        17% {  
            border-bottom-right-radius: 3px;  
        }  
        25% {  
            transform: translateY(9px) rotate(22.5deg);  
        }  
        50% {  
            transform: translateY(18px) scale(1, 0.9) rotate(45deg);  
            border-bottom-right-radius: 40px;  
        }  
        75% {  
            transform: translateY(9px) rotate(67.5deg);  
        }  
        100% {  
            transform: translateY(0) rotate(90deg);  
        }  
    }  
    @keyframes csshub-shadow {  
        0%,  
        100% {  
            transform: scale(1, 1);  
        }  
        50% {  
            transform: scale(1.2, 1);  
        }  
    }  
    @-webkit-keyframes csshub-shadow {  
        0%,  
        100% {  
            transform: scale(1, 1);  
        }  
        50% {  
            transform: scale(1.2, 1);  
        }  
    }  
</style>  
    <div class="csshub-loading"></div>  
</body>  
</html>  


效果三：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-03</title>  
</head>  
<body>  
<style>  
    body {  
        padding: 80px 100px;  
    }  
    .csshub-loading {  
        box-sizing: border-box;  
        position: relative;  
        display: inline-block;  
        padding: 0.5em;  
        vertical-align: middle;  
        text-align: center;  
        background-color: transparent;  
        border: 5px solid transparent;  
        border-top-color: #f60;  
        border-bottom-color: #f60;  
        border-radius: 50% 0;  
    box-shadow: 0 0 0.25em #f60 inset;  
    }  
    .csshub-outer {  
        animation: csshub-spin 1s infinite linear;  
        -webkit-animation: csshub-spin 1s infinite linear;  
    }  
    .csshub-inner {  
        animation: csshub-spin 1s infinite linear;  
        -webkit-animation: csshub-spin 1s infinite linear;  
    }  
    @keyframes csshub-spin {  
        0% {  
            transform: rotateZ(0deg);  
        }  
        100% {  
            transform: rotateZ(360deg);  
        }  
    }   
    @-webkit-keyframes csshub-spin {  
        0% {  
            transform: rotateZ(0deg);  
        }  
        100% {  
            transform: rotateZ(360deg);  
        }  
    }   
</style>  
    <div class="csshub-loading csshub-outer">  
        <div class="csshub-loading csshub-inner"></div>  
    </div>  
</body>  
</html>  


效果四：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-04</title>  
</head>  
<body>  
<style>  
    body{   
        padding: 80px 100px;  
    }  
    .csshub-loading-icon{  
        padding:10px;  
        width:10px;  
        height:10px;  
        border-top:20px solid #ED5548;   
        border-right:20px solid #599CD3;  
        border-bottom: 20px solid #5CBD5E;  
        border-left:20px solid #FDD901;  
        background:transparent;  
        -webkit-animation: csshub-rotate-right-round 1200ms ease-in-out infinite  alternate ;  
        animation: csshub-rotate-right-round 1200ms ease-in-out infinite  alternate ;  
    }  
    @-webkit-keyframes csshub-rotate-right-round  
        {  
            0% { -webkit-transform: rotate(0deg);}  
            50% {-webkit-transform: rotate(180deg); }  
            100% {-webkit-transform: rotate(360deg);-webkit-border-radius:50%;}  
        }  
    @keyframes csshub-rotate-right-round  
        {  
        0% { transform: rotate(0deg);}  
        50% {transform: rotate(180deg); }  
        100% {transform: rotate(360deg);border-radius:50%;}  
    }  
</style>  
    <div class="csshub-loading-icon"></div>  
</body>  
</html>  



效果五：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-05</title>  
</head>  
<body>  
<style>  
    body {  
        background-color: #F5F5F5;  
        padding: 100px 120px;  
    }  
    .csshub-circle-loader {  
        display: block;  
        width: 64px;  
        height: 64px;  
        -webkit-transform-origin: 16px 16px;  
        transform-origin: 16px 16px;  
        -webkit-animation: csshub-rotate-animation 5s infinite;  
        animation: csshub-rotate-animation 5s infinite;  
        -webkit-animation-timing-function: linear;  
        animation-timing-function: linear;  
    }  
    .csshub-circle-loader .csshub-circle {  
        -webkit-animation: move-animation 2.5s infinite;  
        animation: move-animation 2.5s infinite;  
        -webkit-animation-timing-function: linear;  
        animation-timing-function: linear;  
        position: absolute;  
        left: 50%;  
        top: 50%;  
    }  
    .csshub-circle-loader .csshub-circle-line {  
        width: 64px;  
        height: 24px;  
        position: absolute;  
        top: 4px;  
        left: 0;  
        -webkit-transform-origin: 4px 4px;  
        transform-origin: 4px 4px;  
    }  
    .csshub-circle-loader .csshub-circle-line:nth-child(0) {  
        -webkit-transform: rotate(0deg);  
        transform: rotate(0deg);  
    }  
    .csshub-circle-loader .csshub-circle-line:nth-child(1) {  
        -webkit-transform: rotate(90deg);  
        transform: rotate(90deg);  
    }  
    .csshub-circle-loader .csshub-circle-line:nth-child(2) {  
        -webkit-transform: rotate(180deg);  
        transform: rotate(180deg);  
    }  
    .csshub-circle-loader .csshub-circle-line:nth-child(3) {  
        -webkit-transform: rotate(270deg);  
        transform: rotate(270deg);  
    }  
    .csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(1) {  
        width: 8px;  
        height: 8px;  
        top: 50%;  
        left: 50%;  
        margin-top: -4px;  
        margin-left: -4px;  
        border-radius: 4px;  
        -webkit-animation-delay: -0.3s;  
        animation-delay: -0.3s;  
    }  
    .csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(2) {  
        width: 16px;  
        height: 16px;  
        top: 50%;  
        left: 50%;  
        margin-top: -8px;  
        margin-left: -8px;  
        border-radius: 8px;  
        -webkit-animation-delay: -0.6s;  
        animation-delay: -0.6s;  
    }  
    .csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(3) {  
        width: 24px;  
        height: 24px;  
        top: 50%;  
        left: 50%;  
        margin-top: -12px;  
        margin-left: -12px;  
        border-radius: 12px;  
        -webkit-animation-delay: -0.9s;  
        animation-delay: -0.9s;  
    }  
    .csshub-circle-loader .csshub-circle-blue {  
        background-color: #1f4e5a;  
    }  
    .csshub-circle-loader .csshub-circle-red {  
        background-color: #ff5955;  
    }  
    .csshub-circle-loader .csshub-circle-yellow {  
        background-color: #ffb265;  
    }  
    .csshub-circle-loader .csshub-circle-green {  
        background-color: #00a691;  
    }  
    @-webkit-keyframes csshub-rotate-animation {  
        0% {  
            -webkit-transform: rotate(0deg);  
            transform: rotate(0deg);  
        }  
        100% {  
            -webkit-transform: rotate(360deg);  
            transform: rotate(360deg);  
        }  
    }  
    @keyframes csshub-rotate-animation {  
        0% {  
            -webkit-transform: rotate(0deg);  
            transform: rotate(0deg);  
        }  
        100% {  
            -webkit-transform: rotate(360deg);  
            transform: rotate(360deg);  
        }  
    }  
    @-webkit-keyframes move-animation {  
        0% {  
            -webkit-transform: translate(0, 0);  
            transform: translate(0, 0);  
        }  
        25% {  
            -webkit-transform: translate(-64px, 0);  
            transform: translate(-64px, 0);  
        }  
        75% {  
            -webkit-transform: translate(32px, 0);  
            transform: translate(32px, 0);  
        }  
        100% {  
            -webkit-transform: translate(0, 0);  
            transform: translate(0, 0);  
        }  
    }  
    @keyframes move-animation {  
        0% {  
            -webkit-transform: translate(0, 0);  
            transform: translate(0, 0);  
        }  
        25% {  
            -webkit-transform: translate(-64px, 0);  
            transform: translate(-64px, 0);  
        }  
        75% {  
            -webkit-transform: translate(32px, 0);  
            transform: translate(32px, 0);  
        }  
        100% {  
            -webkit-transform: translate(0, 0);  
            transform: translate(0, 0);  
        }  
    }  
</style>  
    <div class="csshub-page">  
        <div class="csshub-circle-loader">  
            <div class="csshub-circle-line">  
            <div class="csshub-circle csshub-circle-blue"></div>  
            <div class="csshub-circle csshub-circle-blue"></div>  
            <div class="csshub-circle csshub-circle-blue"></div>  
        </div>  
        <div class="csshub-circle-line">  
            <div class="csshub-circle csshub-circle-yellow"></div>  
            <div class="csshub-circle csshub-circle-yellow"></div>  
            <div class="csshub-circle csshub-circle-yellow"></div>  
        </div>  
        <div class="csshub-circle-line">  
            <div class="csshub-circle csshub-circle-red"></div>  
            <div class="csshub-circle csshub-circle-red"></div>  
            <div class="csshub-circle csshub-circle-red"></div>  
        </div>  
        <div class="csshub-circle-line">  
            <div class="csshub-circle csshub-circle-green"></div>  
            <div class="csshub-circle csshub-circle-green"></div>  
            <div class="csshub-circle csshub-circle-green"></div>  
        </div>  
    </div>  
</body>  
</html>  


效果六：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-06</title>  
</head>  
<body>  
<style>  
    body {  
        background-color: #e7e6dd;  
        padding: 50px 0;  
    }  
    .csshub-loading {  
        position: relative;  
        width: 100px;  
        height: 100px;  
        margin: 0 auto  
    }  
    .csshub-loading span {  
        display: block;  
        position: absolute;  
        width: 50%;  
        height: 50%;  
    }  
    .csshub-loading span:nth-child(1) {  
        top: 0;  
        left: 0;  
        background-color: rgba(66, 133, 244, 0.75);  
        -webkit-animation: csshub-move1 2s linear infinite;  
        animation: csshub-move1 2s linear infinite;  
    }  
    .csshub-loading span:nth-child(2) {  
        top: 0;  
        right: 0;  
        background-color: rgba(219, 68, 55, 0.75);  
        -webkit-animation: csshub-move2 2s linear infinite;  
        animation: csshub-move2 2s linear infinite;  
    }  
    .csshub-loading span:nth-child(3) {  
        bottom: 0;  
        left: 0;  
        background-color: rgba(244, 180, 0, 0.75);  
        -webkit-animation: csshub-move3 2s linear infinite;  
        animation: csshub-move3 2s linear infinite;  
    }  
    .csshub-loading span:nth-child(4) {  
        bottom: 0;  
        right: 0;  
        background-color: rgba(15, 157, 88, 0.75);  
        -webkit-animation: csshub-move4 2s linear infinite;  
        animation: csshub-move4 2s linear infinite;  
    }  
    @-webkit-keyframes csshub-move1 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
            z-index: 10;  
        }  
        25% {  
            -webkit-transform: translate(100%, 0);  
            transform: translate(100%, 0);  
        }  
        50% {  
            -webkit-transform: translate(100%, 100%);  
            transform: translate(100%, 100%);  
        }  
        75% {  
            -webkit-transform: translate(0, 100%);  
            transform: translate(0, 100%);  
            z-index: 0;  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  

    @keyframes csshub-move1 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
            z-index: 10;  
        }  
        25% {  
            -webkit-transform: translate(100%, 0);  
            transform: translate(100%, 0);  
        }  
        50% {  
            -webkit-transform: translate(100%, 100%);  
            transform: translate(100%, 100%);  
        }  
        75% {  
            -webkit-transform: translate(0, 100%);  
            transform: translate(0, 100%);  
            z-index: 0;  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  
    @-webkit-keyframes csshub-move2 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(0, 100%);  
            transform: translate(0, 100%);  
        }  
        50% {  
            -webkit-transform: translate(-100%, 100%);  
            transform: translate(-100%, 100%);  
            z-index: 0;  
        }  
        75% {  
            -webkit-transform: translate(-100%, 0);  
            transform: translate(-100%, 0);  
            z-index: 10;  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  
    @keyframes csshub-move2 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(0, 100%);  
            transform: translate(0, 100%);  
        }  
        50% {  
            -webkit-transform: translate(-100%, 100%);  
            transform: translate(-100%, 100%);  
            z-index: 0;  
        }  
        75% {  
            -webkit-transform: translate(-100%, 0);  
            transform: translate(-100%, 0);  
            z-index: 10;  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  
    @-webkit-keyframes csshub-move3 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(0, -100%);  
            transform: translate(0, -100%);  
            z-index: 10;  
        }  
        50% {  
            -webkit-transform: translate(100%, -100%);  
            transform: translate(100%, -100%);  
        }  
        75% {  
            -webkit-transform: translate(100%, 0);  
            transform: translate(100%, 0);  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
            z-index: 0;  
        }  
    }  
    @keyframes csshub-move3 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(0, -100%);  
            transform: translate(0, -100%);  
            z-index: 10;  
        }  
        50% {  
            -webkit-transform: translate(100%, -100%);  
            transform: translate(100%, -100%);  
        }  
        75% {  
            -webkit-transform: translate(100%, 0);  
            transform: translate(100%, 0);  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
            z-index: 0;  
        }  
    }  
    @-webkit-keyframes csshub-move4 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(-100%, 0);  
            transform: translate(-100%, 0);  
            z-index: 0;  
        }  
        50% {  
            -webkit-transform: translate(-100%, -100%);  
            transform: translate(-100%, -100%);  
            z-index: 10;  
        }  
        75% {  
            -webkit-transform: translate(0, -100%);  
            transform: translate(0, -100%);  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  
    @keyframes csshub-move4 {  
        0% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
        25% {  
            -webkit-transform: translate(-100%, 0);  
            transform: translate(-100%, 0);  
            z-index: 0;  
        }  
        50% {  
            -webkit-transform: translate(-100%, -100%);  
            transform: translate(-100%, -100%);  
            z-index: 10;  
        }  
        75% {  
            -webkit-transform: translate(0, -100%);  
            transform: translate(0, -100%);  
        }  
        100% {  
            -webkit-transform: translate(0);  
            transform: translate(0);  
        }  
    }  
</style>  
    <div class="csshub-loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
    </div>  
</body>  
</html>  

效果七：


[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-07</title>  
</head>  
<body>  
<style>  
    body {  
        background: #000;  
        padding: 100px 0;  
        font-family: 'Hiragino Sans GB', Helvetica, Arial, 'STHeiti', 'WenQuanYi Micro Hei', sans-serif;  
    }  
    .csshub-loading-text {  
        text-align: center;  
    }  
    .csshub-loading-text span {  
        display: inline-block;  
        margin: 0 5px;  
        color: #fff;  
    }  
    .csshub-loading-text span:nth-child(1) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 0s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 0s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(2) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 0.2s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 0.2s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(3) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 0.4s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 0.4s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(4) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 0.6s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 0.6s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(5) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 0.8s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 0.8s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(6) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 1s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 1s infinite linear alternate;  
    }  
    .csshub-loading-text span:nth-child(7) {  
        -webkit-filter: blur(0px);  
        filter: blur(0px);  
        -webkit-animation: csshub-blur-text 1.5s 1.2s infinite linear alternate;  
        animation: csshub-blur-text 1.5s 1.2s infinite linear alternate;  
    }  
    @-webkit-keyframes csshub-blur-text {  
        0% {  
            -webkit-filter: blur(0px);  
            filter: blur(0px);  
        }  
        100% {  
            -webkit-filter: blur(4px);  
            filter: blur(4px);  
        }  
    }  
    @keyframes csshub-blur-text {  
        0% {  
            -webkit-filter: blur(0px);  
            filter: blur(0px);  
        }  
        100% {  
            -webkit-filter: blur(4px);  
            filter: blur(4px);  
        }  
    }  
</style>  
<div class="csshub-loading-text">  
    <span>L</span>  
    <span>O</span>  
    <span>A</span>  
    <span>D</span>  
    <span>I</span>  
    <span>N</span>  
    <span>G</span>  
</div>  
</body>  
</html>  


效果八：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-08</title>  
</head>  
<body>  
    <style>  
    .csshub-loader {  
        background: #FFF;  
        margin: 50px auto;  
        width: 100px;  
        height: 100px;  
        animation: spin 8s infinite;  
        -webkit-animation: spin 8s infinite;  
    }  
    .csshub-square {  
        background: #FA8D62;  
        border-radius: 5px;  
        float: left;  
        clear: right;  
        margin: 3px;  
        width: 27px;  
        height: 27px;  
        animation: disappear alternate 800ms infinite;  
        -webkit-animation: disappear alternate 800ms infinite;  
    }  
    .csshub-loader .csshub-square:nth-child(1) {  
        animation-delay: 200ms;  
        -webkit-animation-delay: 200ms;  
    }  
    .csshub-loader .csshub-square:nth-child(2) {   
        animation-delay: 400ms;   
        -webkit-animation-delay: 400ms;   
    }  
    .csshub-loader .csshub-square:nth-child(3) {   
        animation-delay: 600ms;   
        -webkit-animation-delay: 600ms;   
    }  
    .csshub-loader .csshub-square:nth-child(4) {  
        animation-delay: 400ms;   
        -webkit-animation-delay: 400ms;   
    }  
    .csshub-loader .csshub-square:nth-child(5) {  
        animation-delay: 600ms;   
        -webkit-animation-delay: 600ms;   
    }  
    .csshub-loader .csshub-square:nth-child(6) {  
        animation-delay: 800ms;   
        -webkit-animation-delay: 800ms;   
    }  
    .csshub-loader .csshub-square:nth-child(7) {  
        animation-delay: 600ms;   
        -webkit-animation-delay: 600ms;   
    }  
    .csshub-loader .csshub-square:nth-child(8) {  
        animation-delay: 800ms;   
        -webkit-animation-delay: 800ms;   
    }  
    .csshub-loader .csshub-square:nth-child(9) {  
        animation-delay: 1s;   
        -webkit-animation-delay: 1s;   
    }  
    @keyframes disappear {  
        0% {  
            background-color: #FA8D62;  
            transform: scale(1, 1);  
        }  
        100% {  
            background-color : #FFDE3F;  
            transform: scale(0, 0);  
        }  
    }  
    @-webkit-keyframes disappear {  
        0% {  
            background-color: #FA8D62;  
            transform: scale(1, 1);  
        }  
        100% {  
            background-color : #FFDE3F;  
            transform: scale(0, 0);  
        }  
    }  
    @keyframes spin {  
        0% {  
            transform: rotate(0deg);  
        }  
        25% {  
            transform: rotate(90deg);  
        }  
        50% {  
            transform: rotate(180deg);  
        }  
        75% {  
            transform: rotate(270deg);  
        }  
        100% {  
            transform: rotate(360deg);  
        }  
    }  
    @-webkit-keyframes spin {  
        0% {  
            transform: rotate(0deg);  
        }  
        25% {  
            transform: rotate(90deg);  
        }  
        50% {  
            transform: rotate(180deg);  
        }  
        75% {  
            transform: rotate(270deg);  
        }  
        100% {  
            transform: rotate(360deg);  
        }  
    }  
</style>  
    <div class="csshub-loader">  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
        <div class="csshub-square"></div>  
    </div>  
</body>  
</html>  


效果九：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-09</title>  
</head>  
<body>  
<style>  
    body {  
        padding: 100px 150px;  
    }  
    @-webkit-keyframes csshub-scale-multiple {  
        0% {  
            -webkit-transform: scale(0);  
            transform: scale(0);  
            opacity: 0;  
        }  
        5% {  
            opacity: 1;  
        }  
        100% {  
            -webkit-transform: scale(1);  
            transform: scale(1);  
            opacity: 0;  
        }   
    }  
    @keyframes csshub-scale-multiple {  
        0% {  
            -webkit-transform: scale(0);  
            transform: scale(0);  
            opacity: 0;  
        }  
        5% {  
            opacity: 1;  
        }  
        100% {  
            -webkit-transform: scale(1);  
            transform: scale(1);  
            opacity: 0;  
        }  
    }  
    .csshub-scale {  
        position: relative;  
        -webkit-transform: translateY(-30px);  
        transform: translateY(-30px);   
    }  
    .csshub-scale > div:nth-child(2) {  
        -webkit-animation-delay: -0.4s;  
        animation-delay: -0.4s;  
    }  
    .csshub-scale > div:nth-child(3) {  
        -webkit-animation-delay: -0.2s;  
        animation-delay: -0.2s;  
    }  
    .csshub-scale > div {  
        background-color: #ed5565;  
        width: 15px;  
        height: 15px;  
        border-radius: 100%;  
        margin: 2px;  
        -webkit-animation-fill-mode: both;  
        animation-fill-mode: both;  
        position: absolute;  
        left: -30px;  
        top: 0px;  
        opacity: 0;  
        margin: 0;  
        width: 60px;  
        height: 60px;  
        -webkit-animation: csshub-scale-multiple 1s 0s linear infinite;  
        animation: csshub-scale-multiple 1s 0s linear infinite;   
    }  
</style>  
    <div class="csshub-scale">  
        <div></div>  
        <div></div>  
        <div></div>  
    </div>  
</body>  
</html>  


效果十：

[html] view plain copy
<!doctype html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="renderer" content="webkit">  
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">  
<title>loading-10</title>  
</head>  
<body>  
<style>  
body{   
    padding-top: 50px;  
}  
.csshub-loading {  
    text-align: center;  
}  
.csshub-loading > div {  
    background-color: #14b9c7;  
    width: 4px;  
    height: 35px;  
    border-radius: 2px;  
    margin: 2px;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both;  
    display: inline-block;  
    -webkit-animation: csshub-line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);  
    animation: csshub-line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);  
}  
.csshub-loading > div:nth-child(2), .csshub-loading > div:nth-child(4) {  
    -webkit-animation-delay: -0.4s !important;  
    animation-delay: -0.4s !important;  
}  
.csshub-loading > div:nth-child(1), .csshub-loading > div:nth-child(5) {  
    -webkit-animation-delay: -0.2s !important;  
    animation-delay: -0.2s !important;  
}  
@-webkit-keyframes csshub-line-scale-pulse-out {  
    0% {  
        -webkit-transform: scaley(1);  
        transform: scaley(1);  
    }  
    50% {  
        -webkit-transform: scaley(0.4);  
        transform: scaley(0.4);  
    }  
    100% {  
        -webkit-transform: scaley(1);  
        transform: scaley(1);  
    }  
}  
@keyframes csshub-line-scale-pulse-out {  
    0% {  
        -webkit-transform: scaley(1);  
        transform: scaley(1);  
    }  
    50% {  
        -webkit-transform: scaley(0.4);  
        transform: scaley(0.4);  
    }  
    100% {  
        -webkit-transform: scaley(1);  
        transform: scaley(1);  
    }  
}  
</style>  
    <div class="csshub-loading">  
        <div></div>  
        <div></div>  
        <div></div>  
        <div></div>  
        <div></div>  
    </div>  
</body>  
</html>

CSS loading图标：http://blog.csdn.net/qq_35515563/article/details/71082696
CSS loading图标2：http://blog.csdn.net/doulinxu/article/details/71713818
CSS loading图标3：http://www.htmleaf.com/Demo/201504151683.html
CSS loading图标4：http://www.htmleaf.com/css3/css3donghua/201503301596.html
CSS loading图标5：http://www.htmleaf.com/css3/css3donghua/20141117510.html

Albert_Tiger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 绘制loading图标
小小少年
02-26 419
原理：利用animate动画和时间差绘制小原点。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width
谷歌Loading图标加载CSS3特效
06-24
谷歌Loading图标加载CSS3特效是一款纯CSS3绘制的扁平化谷歌Loading加载图标动画特效。
css3加载图标样式_loading加载动画图标代码
01-08
css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码
CSS实现loading图标
qq_43390721的博客
03-14 810
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;loading&lt;/title&gt; &lt;style&gt; *{ margin: 0;padding: 0;
css实现loading的动画图标
wenge1477的博客
01-15 636
1、例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;this is animation&lt;/title&gt;     &lt;style type="text/css"&gt;         @keyframes topMove{             0%{                 tr
html+css+小图标,HTML+CSS入门 一个简单实用的CSS loading图标
weixin_35955473的博客
06-04 203
本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。Htmlhtml>.cssload-container{width:24px;height:24px;position:fixed;top:260px;...
53种css3 loading白色加载图标动画特效
09-13
53种css3 loading白色加载图标动画特效
纯css3制作loading加载图标动画特效
09-13
纯css3制作loading加载图标动画特效
CSS3加载loading图标动画.zip
05-24
CSS3加载loading图标动画，多种loading动画效果。
纯css3波浪加载loading图标动画特效
09-08
纯css3波浪加载loading图标动画特效
loading页面加载图标css3代码.zip
07-04
loading页面加载图标css3代码里面包含9款不同效果的css3加载动画特效。
特殊的LOADING界面(2)
08-06
这次送给大家一首很好听的钢琴曲－－最终幻想８中的一首曲子，同时也是《小兵的故事》中第一集的背景音乐。 源代码考虑到大小问题，就不附送音乐了。对于测试LOADING的方法还不太清楚的闪客。 请看我的第一版?
各种各样的loading小图标
03-25
各种各样的loading小图标，gif格式，png格式
懒人原生css3 加载loading 动画效果
06-12
效果描述： 之前看到网上很多css3 实现的loading动画加载效果 今天懒人站长特意写了一个效果供给大家使用 原理其实是很简单的，大家简单看看即可看懂 特点：无图片、无js，加载速度快 缺点：不支持低版本浏览器 使用方法： 1、将head中的css样式引入到你的页面中 2、将body中的代码部分拷贝过去即可
loading - css
如果我年少有为不自卑
08-30 395
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;style&gt; .loader { bor
css实现loading
weixin_41815063的博客
04-20 2253
<div class="loading" v-if="loading"> <div class="loading-bg"></div> <div class="loading-container"></div> </div> //css .loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; ...
CSS实现loading加载动画
最新发布
weixin_43541158的博客
04-25 1039
CSS实现loading加载动画效果
css 动画 loading（二）
lz18513030476的博客
03-07 98
使用css实现的一个loading
页面加载loading....(2)
gracehaohaoxue的专栏
04-08 1043
<br /><------------------------------------------------------------------第一种-----------------------------------------------------------------------><br /><script language="JavaScript"> <br /><!-- <br />var url = 'http://www.lanrentuku.com';  <br />//这里就是要跳
css生成loading效果
04-05
以下是一种基于CSS的loading效果的实现方式： HTML代码： ``` <div class="loading"> <div class="loading-inner"> ``` CSS代码： ``` .loading { position: fixed; top: 0; left: 0; width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值