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);
          }
        }
      </style>

     <div class="donut"></div>

donghua.gif

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

GIF1.gif

嘻嘻， 附上代码

     <div class="container">
      <input type="button" value="暂停" onclick="changeType()" id="button">
      <div class="donut" id="donut"></div>
    </div>
      <script>
        function changeType() {
          var donut = document.getElementById('donut');
          var button = document.getElementById('button');
          if(button.value=='暂停') {
            donut.classList.add('stop');
            button.value='继续';
          } else {
            donut.classList.remove('stop');
            button.value='暂停';
          }
        }
    </script>
    
    .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;
          }
        }
      </style>

     <div class="container">
        <div class="item a"></div>
        <div class="item b"></div>
        <div class="item c"></div>
      </div>

下横线

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

GIF.gif

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

     <style>
        .underline {
            display: inline-block;
            position: relative;
            line-height: 2;   /*这里设置line-height是为了让下横线不要太贴着文字了。。*/
        }
        .underline::after {
          content: ''; 
          position: absolute;
          left: 0;
          bottom: 0;
          transform: scaleX(0);  /*设置x方向缩放*/
          height: 2px;
          width: 100%;
          transform-origin: 50% bottom;  /*这里呢，从左到右，从上到下*/
          background: #1395ba;
          transition: transform 1s;
        }
        .underline:hover::after {
            transform: scaleX(1);
            transition: transform 1s;  
        }
      </style>
      <p class="underline">我是小娩娩</p>