手记

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="暂停" ="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

这里是怎么实现呢?
这里主要就是用到了伪元素,::aftertransition, :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>



作者:海娩
链接:https://www.jianshu.com/p/9b2a71fa25e5


0人推荐
随时随地看视频
慕课网APP