闪烁的灯、光标

.light{
    width: 100%; 
    height: 10px;
    margin-top: 40px;
    animation: blink 1s infinite;
    // animation: blink 1s infinite steps(1, start);
}
@keyframes blink {
    0%, 100% {
        background-color: #00A6FD;
    }
    50% {
        background-color: #ddd; 
    }
}

摆动效果、摇摆

#hand{
   -webkit-animation:swinging 2s ease-in-out 0s infinite;
   -moz-animation:swinging 2s ease-in-out 0s infinite;
   animation:swinging 2s ease-in-out 0s infinite;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
}

@-webkit-keyframes swinging{
   0% { -webkit-transform: rotate(10deg); }
   50% { -webkit-transform: rotate(-10deg); }
   100% { -webkit-transform: rotate(10deg); }
}

返回顶部小icon&css3实现小三角

返回顶部

.goback{
    border-radius: 50% 50%;
    background: rgba(0,0,0,.4);
    text-align: center;
    width: 90px;
    height: 90px;
    box-sizing: border-box;
    padding-top: 30px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    &:after{
      content: '';
      display: block;
      width: 40px;
      height: 40px;
      border-bottom: 0;
      border-right: 0;
      border-top: 1px solid #fff; 
      border-left: 1px solid #fff;
      margin: 0 auto;
      z-index: 1;
      transform: matrix(.5,.5,-.5,.5,0,0);  /*浏览器前缀自己加一下就行*/
    }
  }

svg Loading效果

<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" style="" xml:space="preserve">
     <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(152.985 25 25)">
         <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
     </path>
</svg>