前記：嚶嚶嚶，原本是想寫(xiě)很多其他干貨的筆記的。。然而，，看到css3 動(dòng)畫(huà)就停不下來(lái)，哎，總是經(jīng)不起誘惑，大概就是自己拿不到想要的offer的原因吧哭泣。。其他的筆記后來(lái)再補(bǔ)上吧
來(lái)源： 30 Second of CSS

加載條

之前呢，在做公司項(xiàng)目的時(shí)候，為了顯示進(jìn)度，需要有回調(diào)來(lái)顯示進(jìn)度，所以用js控制了這個(gè)css3， 今天看到一個(gè)加載的， 覺(jué)得實(shí)在是太簡(jiǎn)單了?。。?！

     .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，那就再做多一個(gè)小功能，就是可以暫停的， 我覺(jué)得可以暫停會(huì)比較好玩嘻嘻，其實(shí)也就是添加多一個(gè)class， 設(shè)置一個(gè)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='繼續(xù)';
          } else {
            donut.classList.remove('stop');
            button.value='暫停';
          }
        }
    </script>
    
    .stop {
          animation-play-state: paused;
        }

就只添加了一個(gè)控制添加多一個(gè)class的功能而已啦。。

彈動(dòng)加載效果

GIF.gif

嘿嘿，其實(shí)也不難， 主要是要分析，仔細(xì)觀察第一個(gè)球球， 什么動(dòng)畫(huà)效果呢？就是上下和透明度嘛。。然后接下來(lái)的兩個(gè)球球跟第一個(gè)就是一個(gè)延時(shí)的區(qū)別而已了。。

     .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>

下橫線

嚶嚶嚶，這個(gè)是最讓我生氣的東西了。。之前不用css3屬性的時(shí)候，直接是寫(xiě)一個(gè)span標(biāo)簽絕對(duì)定位，jq實(shí)現(xiàn)動(dòng)畫(huà)效果的。然后現(xiàn)在用css實(shí)現(xiàn)， 超容易超流暢的好嗎！！

GIF.gif

這里是怎么實(shí)現(xiàn)呢？
這里主要就是用到了偽元素，::after， transition, :hover，嗯，就是這么簡(jiǎn)單的。。

     <style>
        .underline {
            display: inline-block;
            position: relative;
            line-height: 2;   /*這里設(shè)置line-height是為了讓下橫線不要太貼著文字了。。*/
        }
        .underline::after {
          content: ''; 
          position: absolute;
          left: 0;
          bottom: 0;
          transform: scaleX(0);  /*設(shè)置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>