在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

15种漂亮的loading动画特效

分类:插件代码 更新时间:2019-03-04 浏览次数:181

代码简介

这是一款漂亮的css3 loading动画特效。该特效中包含了15种不同的loading动画效果,他们通过简单的HTML结构和CSS3代码来实现。

浏览器兼容

Chrome、Firefox、Opera、Safari、IE10+

使用方法

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

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

  </div>

</section>


然后添加下面的CSS样式。


.loader-1.loader-outter {
    position:absolute;
    border:4pxsolid#f50057;
    border-left-color:transparent;
    border-bottom:0;
    width:100%;
    height:100%;
    border-radius:50%;
    -webkit-animation: loader-1-outter1s cubic-bezier(.42, .61, .58, .41) infinite;
    animation: loader-1-outter1s cubic-bezier(.42, .61, .58, .41) infinite;
}
 
.loader-1.loader-inner {
    position:absolute;
    border:4pxsolid#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-inner1s cubic-bezier(.42, .61, .58, .41) infinite;
    animation: loader-1-inner1s cubic-bezier(.42, .61, .58, .41) infinite;
}


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!