15款漂亮的css3加载loading动画特效

2019-03-06 09:26 发布

JS代码|

admin
00
admin
湖南省 长沙市
在最美的年纪遇见最美的自己

3490911be2.jpg


包含了15种不同的loading动画效果,他们通过简单的HTML结构和CSS3代码来实现。

HTML结构

第一个示例的基本HTML结构如下。

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


CSS样式

然后添加下面的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;
}


loading动画特效的codepen网址为:https://codepen.io/slyka85/pen/QvBQPb

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

loading
0
猜你喜欢
牛七七
更多发现