【HTML+CSS+JS实现登陆动画效果】

首先引入外部CSS文件和jquery ↓

在html中写出一个按钮 ↓

        
LOGIN

添加样式(临时设置背景颜色方便观察 ↓

*{
    margin: 0px;
    padding: 0px;
}
body{
    height: 100vh;
    display: flex;
    justify-content:center;   /*在竖轴中心*/
    align-items: center;    /*在横轴中心*/
    background: #acaab6;
}

继续设置按钮样式,使其更加美观,设置动画属性,时长0.5秒 ↓

.login{
    position: relative;
    border: none;
    outline: none;   /*点击按钮周围出现的轮廓即为outline*/

    width: 12rem;
    height: 5rem;
    border-radius: 5rem;   
    background-color:#000000;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5rem;
    box-shadow: #000000 0px 8px 28px;     /*设置按钮阴影,四个参数分别是 : 颜色 水平偏移 垂直偏移 宽度*/
    cursor: pointer;      /*光标放在按钮上,光标呈现为  手*/

    transition: 0.5s;   /*动画播放0.5秒*/
}

设置点击后的按钮样式,按钮宽度变为5rem(同高度相同),即呈现为一个正圆,并且按钮中文本’LOGIN’变为完全透明

.active.login{
    width: 5rem;   /*变成长宽相同的"圆"*/
    color:transparent;  /*字体透明*/
}

在按钮中添加一组3个div,设置css样式使其呈现为三个原点,并设置动画属性.时长0.9秒,名为loading,慢速开始后慢速结束的过渡效果,无效循环,动画轮流反向播放。
注意:此为圆点的动画效果,非整个按钮样式变化的动画效果

CSS:

/*点击loading*/
.active .loading{
    position: absolute;   /*绝对定位  不占位置   否则LOGIN被挤离原位*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    display: flex;
    justify-content: space-around;
    align-items: flex-end;

    width: 70%;
    height: 40%;;

    opacity: 1;
}

.active .loading div{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: #ffffff;
    animation: 0.9s loading ease-in-out infinite alternate;

}

设置点击按钮事件,使点击后按钮呈现上述样式

设置3个圆点初始状态为不可见
点击LOGIN后经过0.5秒呈现如下图所示效果

.loading{
    opacity: 0;  /*透明*/
    transition: 0.5s;
}

设置圆点的动画效果,为上下起伏,再将第二第三个圆点动画效果依次延迟0.2s,呈现出波浪形"省略号" 的加载样式

@keyframes loading{
    to{
        transform: translate(0,-1rem);  /*上下平移*/
    }
}


.active .loading div:nth-child(2){
    animation-delay:0.2s;

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

用 svg 绘制登陆成功后,在按钮上出现的,表示登陆成功的 √

设置类名为checkmark

fill='none’设置动画结束后无效果
设置其宽高均为30px
stroke='white’绘制一条白色的线
标签用来创建仅包含直线的形状。
point属性的参数为折线的两个端点和一个折点的相对坐标

设置 √ 初始时完全透明,且在圆点动画开始2秒后开始播放 √ 的动画

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

.verity .loading{
    opacity: 0;
}

stroke-dasharray用于创建虚线,本质上就是根据实线和虚线的长度依次描绘
stroke-dashoffset相对于绘制的起点偏移的量，正值(向右或者顺时针偏移)，负值(向左或者逆时针)

.checkmark{
    position: absolute;   /*绝对定位  不占位置   否则LOGIN被挤离原位*/
    top: 56%;
    left: 50%;
    transform: translate(-50%,-50%);

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

设置√的动画效果,时长0.6秒,延迟0.4秒执行(在圆点动画之后延迟0.4秒)

.verity .checkmark{
    animation: 0.6s show forwards;
    animation-delay: 0.4s;
}
@keyframes show{
    to{
        stroke-dashoffset: 0;
    }
}

最后消除背景颜色,效果完成