CSS3加载动画效果_CSS3 Loading创意旋转动画

CSS3加载动画、Demo是用在网站Loading特效、是一款多种风格的彩色网站加载动画特效、并提供Demo下载、效果图如下、这个一动画效果1为例子、给大家分享代码

HTML代码

<section>
    <div class="loader loader-1">
      <div class="loader-outter"></div>
      <div class="loader-inner"></div>
    </div>
</section>

CSS代码

.loader-1 .loader-outter { 
    position: absolute; 
    border: 4px solid #f50057; 
    border-left-color: transparent; 
    border-bottom: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; 
    animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; 
 }

.loader-1 .loader-inner { 
    position: absolute; 
    border: 4px solid #f50057; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    left: calc(50% - 20px); 
    top: calc(50% - 20px); 
    border-right: 0; 
    border-top-color: transparent; 
    -webkit-animation: 
    loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; 
    animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; 
}

纯css3简单的加载动画效果源代码下载链接: css3 loading动画 密码: ehaj