zoukankan      html  css  js  c++  java
  • 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果。代码如下:

    1、效果1

    <div className='loading-con'>
          <div className='load-dian dian1'></div>
           <div className='load-dian dian2'></div>
           <div className='load-dian dian3'></div>
           <div className='load-dian dian4'></div>
           <div className='load-dian dian5'></div>
           <div className='text-loading'>加载中</div>
     </div>
    .loading-con{
      position: absolute;
      top: 50%;
      width: 100px;
      height: 100px;
      left: 50%;
      transform: translate(-50%,-50%);
      background: rgba(0,0,0,0.65);
      border-radius: 8px;
    }
    .load-dian{
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 5px;
      background: #fff;
      top: 40%;
      -webkit-animation: Loading-delay 1.2s infinite ease-in-out both;
      animation: Loading-delay 1.2s infinite ease-in-out both;
    }
    .dian1{
      left: 15%;
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    .dian2{
      left: 30%;
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }
    .dian3{
      left: 45%;
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    .dian4{
      left: 60%;
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    .dian5{
      left: 75%;
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
    @-webkit-keyframes Loading-delay {
      0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    2、效果2

    <div className='loading-con-o'>
        <div className='load-item load-item-1'></div>
        <div className='load-item load-item-2'></div>
        <div className='load-item load-item-3'></div>
        <div className='load-item load-item-4'></div>
        <div className='load-item load-item-5'></div>
        <div className='load-item load-item-6'></div>
        <div className='load-item load-item-7'></div>
        <div className='load-item load-item-8'></div>
        <div className='load-item load-item-9'></div>
        <div className='load-item load-item-10'></div>
        <div className='load-item load-item-11'></div>
        <div className='load-item load-item-12'></div>
        <div className='text-loading'>加载中</div>
    </div>
    .loading-con-o{
      position: absolute;
      top:50%;
      width: 100px;
      height: 100px;
      left: 50%;
      transform: translate(-50%,-50%);
      background: rgba(0,0,0,0.65);
      border-radius: 8px;
    }
    .load-item{
      position: absolute;
      width: 8px;
      height: 2px;
      border-radius: 2px;
      background: #fff;
      top: 40%;
      left: calc(50% + 8px);
      transform-origin:-100%;
      -webkit-animation: Loading-delay1 1.2s infinite ease-in-out both;
      animation: Loading-delay1 1.2s infinite ease-in-out both;
    }
    @-webkit-keyframes Loading-delay1 {
      0%, 100% {
        opacity: 1;
      }
      40% {
        opacity: 0.1;
      }
    }
    .load-item-1{
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    
    .load-item-2{
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
    
    .load-item-3{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    
    .load-item-4{
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    
    .load-item-5{
      -webkit-transform: rotate(150deg);
      transform: rotate(150deg);
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
    .load-item-6{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
    .load-item-7{
      -webkit-transform: rotate(210deg);
      transform: rotate(210deg);
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
    .load-item-8{
      -webkit-transform: rotate(240deg);
      transform: rotate(240deg);
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
    .load-item-9{
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
    .load-item-10{
      -webkit-transform: rotate(300deg);
      transform: rotate(300deg);
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
    .load-item-11{
      -webkit-transform: rotate(330deg);
      transform: rotate(330deg);
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
    .load-item-12{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-animation-delay: -0s;
      animation-delay: -0s;
    }
  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/zjingjing/p/10365661.html
Copyright © 2011-2022 走看看