在线下单

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

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

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

CSS3 loading预加载动画特效

分类:插件代码 更新时间:2019-01-05 浏览次数:144

代码简介

这是一款CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. HTML结构

    4种loading预加载动画的HTML结构分别如下:



  
    
  
 
 
   
    
  
 
  
    
  
 
   
    
    
    
  
 
  
    
      
      
        
        
          
          
        
      
    
  


2. CSS样式

    分别给4种效果添加CSS样式:


/* KEYFRAMES */
 
@keyframes spin {
  from {
    transform:rotate(0);
  }
  to{
    transform:rotate(359deg);
  }
}
 
@keyframes configure-clockwise {
  0%{
    transform:rotate(0);
  }
  25%{
    transform:rotate(90deg);
  }
  50%{
    transform:rotate(180deg);
  }
  75%{
    transform:rotate(270deg);
  }
  100%{
    transform:rotate(359deg);
  }
}
 
@keyframes configure-xclockwise {
  0%{
    transform:rotate(45deg);
  }
  25%{
    transform:rotate(-45deg);
  }
  50%{
    transform:rotate(-135deg);
  }
  75%{
    transform:rotate(-215deg);
  }
  100%{
    transform:rotate(-305deg);
  }
}
 
@keyframes pulse {
  from {
    opacity:1;
    transform:scale(1);
  }
  to {
    opacity: .25;
    transform:scale(.75);
  }
}
 
/* GRID STYLING */
 
* {
  box-sizing: border-box;
}
 
body {
  min-height:100vh;
  background-color:#37474f;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
 
.spinner-box {
  width:300px;
  height:300px;
  display: flex;
  justify-content:center;
  align-items:center;
  background-color:transparent;
}
 
/* SPINNING CIRCLE */
 
.circle-border {
  width:150px;
  height:150px;
  padding:3px;
  display: flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background:rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1)33%, rgba(63,249,220,1)100%);
  animation: spin .8s linear0s infinite;
}
 
.circle-core {
  width:100%;
  height:100%;
  background-color:#37474f;
  border-radius:50%;
}
 
/* X-ROTATING BOXES */
 
.configure-border-1{
  width:115px;
  height:115px;
  padding:3px;
  position:absolute;
  display: flex;
  justify-content:center;
  align-items:center;
  background:#ffab91;
  animation: configure-clockwise3s ease-in-out0s infinite alternate;
}
 
.configure-border-2{
  width:115px;
  height:115px;
  padding:3px;
  left:-115px;
  display: flex;
  justify-content:center;
  align-items:center;
  background:rgb(63,249,220);
  transform:rotate(45deg);
  animation: configure-xclockwise3s ease-in-out0s infinite alternate;
}
 
.configure-core {
  width:100%;
  height:100%;
  background-color:#37474f;
}
 
/* PULSE BUBBLES */
 
.pulse-container {
  width:120px;
  display: flex;
  justify-content: space-between;
  align-items:center;
}
 
.pulse-bubble {
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:#3ff9dc;
}
 
.pulse-bubble-1{
    animation: pulse .4s ease0s infinite alternate;
}
.pulse-bubble-2{
    animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3{
    animation: pulse .4s ease .4s infinite alternate;
}
 
/* SOLAR SYSTEM */
 
.solar-system {
  width:250px;
  height:250px;
  display: flex;
  justify-content:center;
  align-items:center;
}
 
.orbit {
    position:relative;
    display: flex;
    justify-content:center;
    align-items:center;
    border:1pxsolid#ffffffa5;
    border-radius:50%;
}
 
.earth-orbit {
    width:165px;
    height:165px;
  -webkit-animation: spin12s linear0s infinite;
}
 
.venus-orbit {
    width:120px;
    height:120px;
  -webkit-animation: spin7.4s linear0s infinite;
}
 
.mercury-orbit {
    width:90px;
    height:90px;
  -webkit-animation: spin3s linear0s infinite;
}
 
.planet {
    position:absolute;
    top:-5px;
  width:10px;
  height:10px;
    border-radius:50%;
  background-color:#3ff9dc;
}
 
.sun {
    width:35px;
    height:35px;
    border-radius:50%;
    background-color:#ffab91;
}



问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

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

发票受理

提交成功

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