CSS3加载动画效果_CSS3 Loading创意旋转动画
2017-09-06 13:50:55  By: shinyuu

• shinyuu
• CSS3教程
• 0
• 4510
• 0

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛