炫酷的loading动画源码

1、黑色科技动画(CSS)  查看演示

<div>LOADING...</div>

div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  background-color: #20293a;
  color: #20293a;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  animation: text 10s ease infinite;
}
div:after {
  position: absolute;
  content: "";
  top: -5%;
  left: -5%;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.85);
  filter: blur(5vw);
  background: linear-gradient(270deg, #00fcbd, #7400f9);
  background-size: 150% 150%;
  border-radius: 50%;
  animation: glowmation 10s linear infinite;
}
@keyframes glowmation {
  0% {
    top: -3%;
    left: -3%;
    background-position: 0% 50%;
    background-size: 150% 150%;
  }
  12.5% {
    top: -3%;
    left: 0;
    background-size: 70% 30%;
  }
  25% {
    top: -3%;
    left: 3%;
    background-size: 100% 50%;
  }
  37.5% {
    top: 0;
    left: 3%;
    background-size: 70% 30%;
  }
  50% {
    top: 3%;
    left: 3%;
    background-position: 100% 50%;
    background-size: 30% 30%;
  }
  62.5% {
    top: 3%;
    left: 0;
    background-size: 30% 70%;
  }
  75% {
    top: 3%;
    left: -3%;
    background-size: 50% 100%;
  }
  87.5% {
    top: 0;
    left: -3%;
    background-size: 30% 70%;
  }
  100% {
    top: -3%;
    left: -3%;
    background-position: 0% 50%;
    background-size: 150% 150%;
  }
}
@keyframes text {
  0% {
    color: #7400f9;
  }
  50% {
    color: #00fcbd;
  }
  100% {
    color: #7400f9;
  }
}

2、圆形线条(SVG)   查看演示

<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
    <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
        <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
    </text>
    <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
        C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
        C34.797,11.841,28.159,5.203,20,5.203z">
    </path>
    
    <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
        S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
        S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
    </path>
    
    <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
                c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z" transform="rotate(80.1325 20 20)">
    <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>      
        </path>
    
    <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
    c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
    C12.875,32.922,7.078,27.125,7.078,20z" transform="rotate(338.363 20 20)">
        <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
    </path>
</svg>

3、闪光按钮(CSS)    产看演示

<button class=button>hover me</button>

@keyframes sheen {
    0% {
        -webkit-transform: skewY(-45deg) translateX(0);
        transform: skewY(-45deg) translateX(0);
    }
    100% {
        -webkit-transform: skewY(-45deg) translateX(12.5em);
        transform: skewY(-45deg) translateX(12.5em);
    }
}
.button {
    padding: 0.75em 2em;
    text-align: center;
    text-decoration: none;
    color: #2194E0;
    border: 2px solid #2194E0;
    font-size: 24px;
    display: inline-block;
    border-radius: 0.3em;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.button:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    transition: none;
}

.button:hover {
    background-color: #2194E0;
    color: #fff;
    border-bottom: 4px solid #1977b5;
}

.button:hover:before {
    -webkit-transform: skewX(-45deg) translateX(13.5em);
    transform: skewX(-45deg) translateX(13.5em);
    transition: all 0.5s ease-in-out;
}

更多特效移步：http://www.17sucai.com/pins/demo-show?id=29229