css3简单动画效果

前记：嘤嘤嘤，原本是想写很多其他干货的笔记的。。然而，，看到css3 动画就停不下来，哎，总是经不起诱惑，大概就是自己拿不到想要的offer的原因吧哭泣。。其他的笔记后来再补上吧
来源： 30 Second of CSS

加载条

之前呢，在做公司项目的时候，为了显示进度，需要有回调来显示进度，所以用js控制了这个css3， 今天看到一个加载的， 觉得实在是太简单了！！！！

     .donut {
          width: 50px;
          height: 50px;
          border: 5px solid #ccc;
          border-bottom-color: #1395ba;
          border-radius: 50%;
          animation: donut 2s linear infinite;
        }

        @keyframes donut {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      

     

donghua.gif

emmmm，那就再做多一个小功能，就是可以暂停的， 我觉得可以暂停会比较好玩嘻嘻，其实也就是添加多一个class， 设置一个animation-play-state

GIF1.gif

嘻嘻， 附上代码

     

      
      

    
      
    
    .stop {
          animation-play-state: paused;
        }

就只添加了一个控制添加多一个class的功能而已啦。。

弹动加载效果

先看效果吧

GIF.gif

嘿嘿，其实也不难， 主要是要分析，仔细观察第一个球球， 什么动画效果呢？就是上下和透明度嘛。。然后接下来的两个球球跟第一个就是一个延时的区别而已了。。

     .container {
          position: relative;
          text-align: center;
          width: 100px;
        }

        .item {
          display: inline-block;
          height: 15px;
          width: 15px;
          border-radius: 50%;
          background: #969aec;;
          animation: item 1s ease-in-out infinite;
        }
        .b {
          animation-delay: .2s;
        }
        .c {
          animation-delay: .4s;
        }
        @keyframes item {
          0% {
            transform: translateY(0);
            opacity: 1;
          }
          50% {
            transform: translateY(20px);
            opacity: 0;
          }
          100% {
            transform: translateY(0);
            opacity: 1;
          }
        }
      

     

        

        

        

      

下横线

嘤嘤嘤，这个是最让我生气的东西了。。之前不用css3属性的时候，直接是写一个span标签绝对定位，jq实现动画效果的。然后现在用css实现， 超容易超流畅的好吗！！

GIF.gif

这里是怎么实现呢？
这里主要就是用到了伪元素，::after， transition, :hover，嗯，就是这么简单的。。

     
      
我是小娩娩