前端实战小案例--炫酷动态登录按钮

最新推荐文章于 2022-08-09 11:49:45 发布

leeeeeenas

最新推荐文章于 2022-08-09 11:49:45 发布

阅读量639

点赞数

分类专栏：前端实战小案例

原文链接：https://blog.csdn.net/qq_16687863/article/details/100243007

版权

前端实战小案例专栏收录该内容

21 篇文章 5 订阅

订阅专栏

**【转载】**https://blog.csdn.net/qq_16687863/article/details/100243007

每周要坚持练习2~3个前端的小练习，首先从朽木自雕xmzd的专栏练习开始。

文章目录

前端实战小案例--炫酷动态登录按钮

前端实战小案例–炫酷动态登录按钮

知识点

这篇比较多css3的语法，以及css动画的知识点

1、js中this的指代问题

使用es6可以避免this指代的问题

setTimeout(() => {
	$(this).toggleClass('verity');
}, 2000);

2、justify-content的用法

在这里插入图片描述

3、align-items

在这里插入图片描述

4、animation-delay

5、svg-polyline 的用法

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

6、@keyframes 逐帧的动画

效果图

代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>登录按钮</title>
    <style>
      html,body{
        margin:0;
        padding:0;
      }
      body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .login{
        position: relative;
        width: 12rem;
        height: 5rem;
        outline: none;
        border-radius: 5rem;
        background-color: #000;
        color: #fff;
        font-weight: bold;
        font-size: 1.5rem;
        box-shadow: 0 8px 28px #000000;
        border:none;
        cursor: pointer;

        transition: 0.5s;
      }
      .login.active{
        width: 5rem;
        color:transparent;
      }

      .active .loading{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);

        width: 70%;
        height: 40%;

        /* 该样式用于将3个点水平放置 */
        display: flex;
        justify-content: space-around;
        align-items: flex-end;

        opacity: 1;
      }

      .active .loading div{
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background-color: #fff;

        /* 该样式设置动画效果loading */
				animation: 0.6s loading ease-in-out infinite alternate;
      }
      @keyframes loading {
        from{transform: translateY(0);}
        to{transform: translateY(-1rem);}
      }

      /* 下面三个样式用于将三个点...的移动时间设置的不一样，产生一种此起彼伏的感觉  */
      .loading div:nth-child(2){
        animation-delay: 0.2s
      }
      .loading div:nth-child(3){
        animation-delay: 0.4s;
      }

      .verity .loading{
				opacity: 0;
			}

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

        width: 1.875rem;
        height: 1.875rem;
        fill:none;
        stroke:white;
        stroke-width:0.125rem;

        stroke-dasharray: 2.25rem;
				stroke-dashoffset: 2.25rem;
      }
      .verity .checkmark{
				animation: 0.6s show forwards;
				animation-delay: 0.4s;
			}
			@keyframes show{
				to{stroke-dashoffset: 0;}
			}
    </style>
  </head>
  <body>
    <button class="login">
      <p>login</p>
      <div class="loading">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <!-- 使用SVG绘制一个对勾 -->
      <svg class="checkmark">
        <polyline points="2,10 12,18 28,2" ></polyline>
      </svg>
    </button>
  </body>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(
      $(".login").click(

        function(){
          console.log("click");
          $(this).toggleClass("active");

          if($(this).hasClass('verity')){
            $(this).toggleClass('verity');
          }else{
            setTimeout(()=>{
              $(this).toggleClass('verity');
            },2000)
          }
        }
      )
    )
  </script>
</html>

leeeeeenas

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--炫酷动态登录按钮

**【转载】**https://blog.csdn.net/qq_16687863/article/details/100243007文章目录前端实战小案例--炫酷动态登录按钮知识点1、js中this的指代问题2、justify-content的用法3、align-items4、animation-delay5、svg-polyline 的用法6、@keyframes 逐帧的动画效果图代码前端实战小案例–炫酷动态登录按钮知识点这篇比较多css3的语法，以及css动画的知识点1、js中this的指代
复制链接

扫一扫