纯css Loading加载特效

最新推荐文章于 2022-09-20 21:15:09 发布
最新推荐文章于 2022-09-20 21:15:09 发布
阅读量345 收藏
点赞数
分类专栏： # html 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liming1016/article/details/122521784
版权 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3预加载Loading动画特效</title>
  <style>
    /* CSS Document */

    /*
    Copyright (c) 2010, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.com/yui/license.html
    version: 3.3.0
    build: 3167
    */
    html{color:#000;background:#ecf0f1;height:100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
    *{
      box-sizing:border-box;
    }
    .loader-wrapper {
      display: flex;
      margin: 100px;
    }

    .loader {
      width: 200px;
      height: 200px;
    }

    .loader div {
      width: 100%;
      height: 100%;
    }

    /******************* PRELOADER 1 **********
    *******************************************/
    #preloader_1{
      position:relative;
    }
    #preloader_1 span{
      display:block;
      bottom:0px;
      width: 9px;
      height: 5px;
      background:#9b59b6;
      position:absolute;
      -webkit-animation: preloader_1 1.5s	 infinite ease-in-out;
      -moz-animation: preloader_1 1.5s	 infinite ease-in-out;
      -ms-animation: preloader_1 1.5s	 infinite ease-in-out;
      -o-animation: preloader_1 1.5s	 infinite ease-in-out;
      animation: preloader_1 1.5s	 infinite ease-in-out;

    }
    #preloader_1 span:nth-child(2){
      left:11px;
      -webkit-animation-delay: .2s;
      -moz-animation-delay: .2s;
      -ms-animation-delay: .2s;
      -o-animation-delay: .2s;
      animation-delay: .2s;

    }
    #preloader_1 span:nth-child(3){
      left:22px;
      -webkit-animation-delay: .4s;
      -moz-animation-delay: .4s;
      -ms-animation-delay: .4s;
      -o-animation-delay: .4s;
      animation-delay: .4s;
    }
    #preloader_1 span:nth-child(4){
      left:33px;
      -webkit-animation-delay: .6s;
      -moz-animation-delay: .6s;
      -ms-animation-delay: .6s;
      -o-animation-delay: .6s;
      animation-delay: .6s;
    }
    #preloader_1 span:nth-child(5){
      left:44px;
      -webkit-animation-delay: .8s;
      -moz-animation-delay: .8s;
      -ms-animation-delay: .8s;
      -o-animation-delay: .8s;
      animation-delay: .8s;
    }
    @-webkit-keyframes preloader_1 {
      0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
      25% {height:30px;-webkit-transform:translateY(15px);background:#3498db;}
      50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
      100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
    }

    @-moz-keyframes preloader_1 {
      0% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
      25% {height:30px;-moz-transform:translateY(15px);background:#3498db;}
      50% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
      100% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
    }

    @-ms-keyframes preloader_1 {
      0% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
      25% {height:30px;-ms-transform:translateY(15px);background:#3498db;}
      50% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
      100% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
    }

    @keyframes preloader_1 {
      0% {height:5px;transform:translateY(0px);background:#9b59b6;}
      25% {height:30px;transform:translateY(15px);background:#3498db;}
      50% {height:5px;transform:translateY(0px);background:#9b59b6;}
      100% {height:5px;transform:translateY(0px);background:#9b59b6;}
    }

    /******************* PRELOADER 2 **********
    *******************************************/

    #preloader_2{
      position: relative;
      left: 50%;
      width: 40px;
      height: 40px;
    }
    #preloader_2 span{
      display:block;
      bottom:0px;
      width: 20px;
      height: 20px;
      background:#9b59b6;
      position:absolute;
    }
    #preloader_2 span:nth-child(1){
      -webkit-animation: preloader_2_1 1.5s infinite ease-in-out;
      -moz-animation: preloader_2_1 1.5s infinite ease-in-out;
      -ms-animation: preloader_2_1 1.5s infinite ease-in-out;
      animation: preloader_2_1 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(2){
      left:20px;
      -webkit-animation: preloader_2_2 1.5s infinite ease-in-out;
      -moz-animation: preloader_2_2 1.5s infinite ease-in-out;
      -ms-animation: preloader_2_2 1.5s infinite ease-in-out;
      animation: preloader_2_2 1.5s infinite ease-in-out;

    }
    #preloader_2 span:nth-child(3){
      top:0px;
      -webkit-animation: preloader_2_3 1.5s infinite ease-in-out;
      -moz-animation: preloader_2_3 1.5s infinite ease-in-out;
      -ms-animation: preloader_2_3 1.5s infinite ease-in-out;
      animation: preloader_2_3 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(4){
      top:0px;
      left:20px;
      -webkit-animation: preloader_2_4 1.5s infinite ease-in-out;
      -moz-animation: preloader_2_4 1.5s infinite ease-in-out;
      -ms-animation: preloader_2_4 1.5s infinite ease-in-out;
      animation: preloader_2_4 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes preloader_2_1 {
      0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
      80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
      100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-webkit-keyframes preloader_2_2 {
      0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
      80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
      100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-webkit-keyframes preloader_2_3 {
      0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
      80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
      100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }

    @-webkit-keyframes preloader_2_4 {
      0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
      80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
      100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-moz-keyframes preloader_2_1 {
      0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
      80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
      100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-moz-keyframes preloader_2_2 {
      0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
      80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
      100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-moz-keyframes preloader_2_3 {
      0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
      80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
      100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-moz-keyframes preloader_2_4 {
      0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
      80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
      100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-ms-keyframes preloader_2_1 {
      0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
      80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
      100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-ms-keyframes preloader_2_2 {
      0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
      80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
      100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-ms-keyframes preloader_2_3 {
      0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
      50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
      80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
      100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-ms-keyframes preloader_2_4 {
      0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
      50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
      80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
      100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }

    /******************* PRELOADER 3 **********
    *******************************************/

    #preloader_3{
      position:relative;
    }
    #preloader_3:before{
      width:20px;
      height:20px;
      border-radius:20px;
      background:blue;
      content:'';
      position:absolute;
      background:#9b59b6;
      -webkit-animation: preloader_3_before 1.5s infinite ease-in-out;
      -moz-animation: preloader_3_before 1.5s infinite ease-in-out;
      -ms-animation: preloader_3_before 1.5s infinite ease-in-out;
      animation: preloader_3_before 1.5s infinite ease-in-out;
    }

    #preloader_3:after{
      width:20px;
      height:20px;
      border-radius:20px;
      background:blue;
      content:'';
      position:absolute;
      background:#2ecc71;
      left:22px;
      -webkit-animation: preloader_3_after 1.5s infinite ease-in-out;
      -moz-animation: preloader_3_after 1.5s infinite ease-in-out;
      -ms-animation: preloader_3_after 1.5s infinite ease-in-out;
      animation: preloader_3_after 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes preloader_3_before {
      0% {-webkit-transform: translateX(0px) rotate(0deg)}
      50% {-webkit-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {-webkit-transform: translateX(0px) rotate(0deg)}
    }
    @-webkit-keyframes preloader_3_after {
      0% {-webkit-transform: translateX(0px)}
      50% {-webkit-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
      100% {-webkit-transform: translateX(0px)}
    }

    @-moz-keyframes preloader_3_before {
      0% {-moz-transform: translateX(0px) rotate(0deg)}
      50% {-moz-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {-moz-transform: translateX(0px) rotate(0deg)}
    }
    @-moz-keyframes preloader_3_after {
      0% {-moz-transform: translateX(0px)}
      50% {-moz-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
      100% {-moz-transform: translateX(0px)}
    }

    @-ms-keyframes preloader_3_before {
      0% {-ms-transform: translateX(0px) rotate(0deg)}
      50% {-ms-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {-ms-transform: translateX(0px) rotate(0deg)}
    }
    @-ms-keyframes preloader_3_after {
      0% {-ms-transform: translateX(0px)}
      50% {-ms-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
      100% {-ms-transform: translateX(0px)}
    }

    @keyframes preloader_3_before {
      0% {transform: translateX(0px) rotate(0deg)}
      50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
    }
    @keyframes preloader_3_after {
      0% {transform: translateX(0px)}
      50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
      100% {transform: translateX(0px)}
    }

    /******************* PRELOADER 4 **********
    *******************************************/

    #preloader_4{
      position:relative;
    }
    #preloader_4 span{
      position:absolute;
      width:20px;
      height:20px;
      background:#3498db;
      opacity:0.5;
      border-radius:20px;
      -webkit-animation: preloader_4 1s infinite ease-in-out;
      -moz-animation: preloader_4 1s infinite ease-in-out;
      -ms-animation: preloader_4 1s infinite ease-in-out;
      -animation: preloader_4 1s infinite ease-in-out;

    }
    #preloader_4 span:nth-child(2){
      left:20px;
      -webkit-animation-delay: .2s;
      -moz-animation-delay: .2s;
      -ms-animation-delay: .2s;
      animation-delay: .2s;
    }
    #preloader_4 span:nth-child(3){
      left:40px;
      -webkit-animation-delay: .4s;
      -moz-animation-delay: .4s;
      -ms-animation-delay: .4s;
      animation-delay: .4s;
    }
    #preloader_4 span:nth-child(4){
      left:60px;
      -webkit-animation-delay: .6s;
      -moz-animation-delay: .6s;
      -ms-animation-delay: .6s;
      animation-delay: .6s;
    }
    #preloader_4 span:nth-child(5){
      left:80px;
      -webkit-animation-delay: .8s;
      -moz-animation-delay: .8s;
      -ms-animation-delay: .8s;
      animation-delay: .8s;
    }

    @-webkit-keyframes preloader_4 {
      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); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
      100%  {opacity: 0.3; -webkit-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    }
    @-moz-keyframes preloader_4 {
      0% {opacity: 0.3; -moz-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
      50% {opacity: 1; -moz-transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
      100%  {opacity: 0.3; -moz-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    }
    @-ms-keyframes preloader_4 {
      0% {opacity: 0.3; -ms-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
      50% {opacity: 1; -ms-transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
      100%  {opacity: 0.3; -ms-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    }
    @keyframes preloader_4 {
      0% {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
      50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
      100%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    }

    /******************* PRELOADER 5 **********
    *******************************************/

    #preloader5{
      position:relative;
      width:30px;
      height:30px;
      background:#3498db;
      border-radius:50px;
      -webkit-animation: preloader_5 1.5s infinite linear;
      -moz-animation: preloader_5 1.5s infinite linear;
      -ms-animation: preloader_5 1.5s infinite linear;
      animation: preloader_5 1.5s infinite linear;
    }
    #preloader5:after{
      position:absolute;
      width:50px;
      height:50px;
      border-top:10px solid #9b59b6;
      border-bottom:10px solid #9b59b6;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      border-radius:50px;
      content:'';
      top:-20px;
      left:-20px;
      -webkit-animation: preloader_5_after 1.5s infinite linear;
      -moz-animation: preloader_5_after 1.5s infinite linear;
      -ms-animation: preloader_5_after 1.5s infinite linear;
      animation: preloader_5_after 1.5s infinite linear;
    }

    @-webkit-keyframes preloader_5 {
      0% {-webkit-transform: rotate(0deg);}
      50% {-webkit-transform: rotate(180deg);background:#2ecc71;}
      100% {-webkit-transform: rotate(360deg);}
    }
    @-webkit-keyframes preloader_5_after {
      0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
      50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
      100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    }

    @-moz-keyframes preloader_5 {
      0% {-moz-transform: rotate(0deg);}
      50% {-moz-transform: rotate(180deg);background:#2ecc71;}
      100% {-moz-transform: rotate(360deg);}
    }
    @-moz-keyframes preloader_5_after {
      0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
      50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
      100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    }

    @-ms-keyframes preloader_5 {
      0% {-ms-transform: rotate(0deg);}
      50% {-ms-transform: rotate(180deg);background:#2ecc71;}
      100% {-ms-transform: rotate(360deg);}
    }
    @-ms-keyframes preloader_5_after {
      0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
      50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
      100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    }

    @keyframes preloader_5 {
      0% {transform: rotate(0deg);}
      50% {transform: rotate(180deg);background:#2ecc71;}
      100% {transform: rotate(360deg);}
    }
    @keyframes preloader_5_after {
      0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
      50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
      100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    }

    /******************* PRELOADER 6 **********
    *******************************************/
    #preloader6{
      position:relative;
      width: 42px;
      height: 42px;
      -webkit-animation: preloader_6 5s infinite linear;
      -moz-animation: preloader_6 5s infinite linear;
      -ms-animation: preloader_6 5s infinite linear;
      animation: preloader_6 5s infinite linear;
    }
    #preloader6 span{
      width:20px;
      height:20px;
      position:absolute;
      background:red;
      display:block;
      -webkit-animation: preloader_6_span 1s infinite linear;
      -moz-animation: preloader_6_span 1s infinite linear;
      -ms-animation: preloader_6_span 1s infinite linear;
      animation: preloader_6_span 1s infinite linear;
    }
    #preloader6 span:nth-child(1){
      background:#2ecc71;

    }
    #preloader6 span:nth-child(2){
      left:22px;
      background:#9b59b6;
      -webkit-animation-delay: .2s;
      -moz-animation-delay: .2s;
      -ms-animation-delay: .2s;
      animation-delay: .2s;

    }
    #preloader6 span:nth-child(3){
      top:22px;
      background:#3498db;
      -webkit-animation-delay: .4s;
      -moz-animation-delay: .4s;
      -ms-animation-delay: .4s;
      animation-delay: .4s;
    }
    #preloader6 span:nth-child(4){
      top:22px;
      left:22px;
      background:#f1c40f;
      -webkit-animation-delay: .6s;
      -moz-animation-delay: .6s;
      -ms-animation-delay: .6s;
      animation-delay: .6s;
    }

    @-webkit-keyframes preloader_6 {
      from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
    }
    @-webkit-keyframes preloader_6_span {
      0% { -webkit-transform:scale(1); }
      50% { -webkit-transform:scale(0.5); }
      100% { -webkit-transform:scale(1); }
    }

    @-moz-keyframes preloader_6 {
      from {-moz-transform: rotate(0deg);}
      to {-moz-transform: rotate(360deg);}
    }
    @-moz-keyframes preloader_6_span {
      0% { -moz-transform:scale(1); }
      50% { -moz-transform:scale(0.5); }
      100% { -moz-transform:scale(1); }
    }

    @-ms-keyframes preloader_6 {
      from {-ms-transform: rotate(0deg);}
      to {-ms-transform: rotate(360deg);}
    }
    @-ms-keyframes preloader_6_span {
      0% { -ms-transform:scale(1); }
      50% { -ms-transform:scale(0.5); }
      100% { -ms-transform:scale(1); }
    }

    @-ms-keyframes preloader_6 {
      from {-ms-transform: rotate(0deg);}
      to {-ms-transform: rotate(360deg);}
    }
    @keyframes preloader_6_span {
      0% { transform:scale(1); }
      50% { transform:scale(0.5); }
      100% { transform:scale(1); }
    }
  </style>
</head>
<body>
<div class="loader-wrapper">
  <div class="loader">
    <div id="preloader_1">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="loader">
    <div id="preloader_2">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="loader">
    <div id="preloader_3"></div>
  </div>
  <div class="loader">
    <div id="preloader_4">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="loader">
    <div id="preloader5"></div>
  </div>
  <div class="loader">
    <div id="preloader6">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
</body>
</html>

 

江湖行骗老中医
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯文本Loading加载动画特效
06-24
"纯文本Loading加载动画特效"是一种创新的设计方法，它利用纯文本而非图形元素来创建加载效果，既节省了资源，又具有独特的视觉吸引力。 CSS（Cascading Style Sheets）是网页样式和布局的主要工具，它可以用来控制...
纯css3音阶波浪loading加载动画特效
09-04
【纯CSS3音阶波浪加载动画特效】是一种利用现代浏览器对CSS3特性的支持，创建出具有音乐旋律感和动态视觉效果的加载指示器。这个加载动画通过纯CSS3技术，无需JavaScript或其他编程语言，就能实现优雅且引人入胜的...
非常有用的CSS模板
个人博客
10-11 2139
CSS Reset (CSS固定样板) /* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0 */ /**  * YUI Reset
8种CSS实现loading加载特效的小技巧（分享）
qq_43067585的博客
05-27 4852
本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！ 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。（学习视频分享：css视频教程、web前端） 本文只介绍圈形加载。其他的会在其他文章中介绍。 loader-1 这应该是最简单的CSS加载了。在圆圈上有
loading加载效果（纯css）
m0_61004873的博客
09-20 1912
页面loading加载效果
css3图片转动动画loading
qq_37816525的博客
09-30 642
//使用动画 img{ -moz-animation:change 1s linear infinite; -ms-animation:change 1s linear infinite; -o-animation:change 1s linear infinite; -webkit-animation:change 1s linear infinite; animation:change 1s ...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
纯CSS3货车Loading加载特效.zip
最新发布
10-15
【标题】"纯CSS3货车Loading加载特效.zip"所涉及的知识点主要集中在CSS3技术和网页动态效果的实现上。CSS3是 Cascading Style Sheets（层叠样式表）的第三个主要版本，相较于CSS2，它引入了许多新的特性和功能，使得...
纯CSS3加载动画Loading特效代码
06-24
纯CSS3加载动画Loading特效代码是一种利用现代浏览器对CSS3特性的支持，创建出各种动态、视觉吸引人的加载效果的技术。这些加载动画通常用于网页内容加载完毕前，为用户提供一个反馈，表明页面正在处理或数据正在...
纯CSS3加载动画Loading特效特效代码
03-20
"纯CSS3加载动画Loading特效特效代码"集合提供了超过30种不同的加载动画效果，全部基于CSS3技术实现，无需依赖JavaScript或者其他外部库，这使得它们对性能友好且易于集成到各种项目中。 首先，我们要理解CSS3是...
css3超炫loading加载特效.zip
07-04
CSS3超炫Loading加载特效是一款包含8种基于CSS3实现的很炫的加载动画。
CSS3 H5液体形态Loading加载动画特效.zip
07-11
代码片段： <body>[removed][removed]   <div class="loading">   <div></div>   <div></div>   <div></div>   <div></div> </div>
28种CSS3炫酷loading页面加载动画特效代码
05-30
28酷炫吊的CSS3加载效果特效动画代码，分分钟让你的加载超乎你的想象
node-menunav
wolf8758549的博客
12-26 240
/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.2.0 build: 2676 */ html{color:#000;background...
几个优秀的js框架的license问题，付费，版权，侵权
super2007的专栏
12-19 4867
http://www.cnblogs.com/laixiaoyu/archive/2009/08/14/1546165.html 几个优秀的js框架的license问题，付费，版权，侵权 我的理解 1、 extjs：可以免费调用使用，以及商用，自己开发的软件有调用它也可以销售，不涉及侵权。如果你把extjs改为一个一个同性质的js框架软件，如果销售则是侵权，你的修改必须是开源，否
网站性能工具Yslow的使用方法
ddxkjddx的专栏
02-17 783
Yslow是雅虎开发的基于网页性能分析浏览器插件，从年初我使用了YSlow后，改变了博客模板大量冗余代码，不仅提升了网页的打开速度，这款插件还帮助我分析了不少其他网站的代码，之前我还特意写了提高网站速度的秘籍，就是通过这款插件分析得出的。网络上已经有不少Yslow使用说明了，本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。 Yslow的安装方法 现在Yslow已经有很多版
[css3特效]loading加载中
zccst的专栏
03-25 538
作者：zccst 以前loading都是一张图片，显示或隐藏。 现在如果考虑移动端弱网到连图片也载入不成功，此时css3的loading就非常有用了，而且模拟了图片效果，节省空间。 基本原理： 1，外部一个span，固定宽高（正方形），行内块元素，相对定位，垂直对齐。 2，内部12个span，相对宽高（相对外部），行内块元素，绝对定位(top,left)，颜色，背景色，动画（最重...
css实现加载中loading动画效果
低调哥的博客
02-09 6632
1.html&lt;div class="load-container"&gt; &lt;div class="loader"&gt;&lt;/div&gt; &lt;p&gt;加载中请稍后...&lt;/p&gt; &lt;/div&gt;2.css.load-container{padding:20px 0;text-align:center;} .loa
css页面加载loading动画特效
秋霜梦红尘的博客
05-06 594
css页面加载loading动画特效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>加载中loading效果</title> </head> <style> *{ margin: 0; padd...
css loading加载动画
08-26
CSS loading加载动画可以使用单个元素来完成。这意味着你只需要一个div元素，而不需要复制大量代码。你可以向这个div元素中添加一个类，以启动loading效果。 在选择加载提示动画时，你可以考虑使用一些经典的款式，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江湖行骗老中医

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值