动态提交按钮

最新推荐文章于 2021-05-28 22:48:03 发布

萌芽子

最新推荐文章于 2021-05-28 22:48:03 发布

阅读量223

点赞数 2

文章标签： css动画

本文链接：https://blog.csdn.net/Meng_ya_zi/article/details/96342308

版权

今天做了个小动画的练习，没什么好讲的直接粘源码了~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
    }

    /* button style start */
    .login {
      position: relative;
      width: 12rem;
      height: 5rem;
      border: none;
      outline: none;
      border-radius: 5rem;
      font-weight: bold;
      font-size: 1.5rem;
      color: white;
      background: #000;
      box-shadow: 0 8px 28px black;

      cursor: pointer;
      transition: 0.5s;
    }

    .active.login {
      width: 5rem;
      color: transparent;
    }
    /* button style end */

    /* loading style start */
    .loading {
      opacity: 0;
      transition: 0.5s;
    }
    .active .loading {
      position: absolute;
      left: 50%;
      top: 50%;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 70%;
      height: 40%;
      transform: translate(-50%, -50%);
      opacity: 1;
    }
    .active .loading > div {
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background-color: white;
      animation: 0.5s loading ease-in-out infinite alternate;
    }
    @keyframes loading {
      to {
        transform: translate(0, -1rem);
      }
    }

    .active .loading > div:nth-child(2){
        animation-delay: .2s;
    }
    .active .loading > div:nth-child(3){
        animation-delay: .4s;
    }

    .verity .loading{
        opacity: 0;
    }
    /* loading style end */

    /* checkmark style start */
    .checkmark{
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%,-50%);

        /* 利用stroke的虚线和偏移值达到加载的动画效果 */
        stroke-dasharray: 36px;
        stroke-dashoffset: 36px;
    }

    .verity .checkmark{
        animation: .6s show forwards;
        animation-delay: .4s;
    }

    @keyframes show{
        to{
            stroke-dashoffset: 0;
        }
    }
    /* checkmark style end */
  </style>
  <body>
    <div id="box">
      <button class="login">
        <p>Login</p>
        <div class="loading">
          <div></div>
          <div></div>
          <div></div>
        </div>

        <svg class="checkmark" width='30px' height='30px' stroke='white' fill='none'>
<polyline points='2,10 12,18 28,2'></polyline>
        </svg>
      </button>
    </div>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
      $(function() {
        $(".login").click(function() {
          $(this).toggleClass("active");
          setTimeout(()=>{
              $(this).toggleClass('verity');
          },2000)
        });
      });
    </script>
  </body>
</html>

附上视频地址，学习了：https://www.bilibili.com/video/av58709312

萌芽子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态提交按钮

今天做了个小动画的练习，没什么好讲的直接粘源码了~<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...
复制链接

扫一扫