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

电玩女神 2024-04-17 14:36 74阅读 0赞

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

<link rel="stylesheet" href="style.css">
    
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

**在html中写出一个按钮 ↓**

<button class="login">
            <p>LOGIN</p>
    </button>

![20190827145111398.png][]  
**添加样式(临时设置背景颜色方便观察 ↓**

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

![在这里插入图片描述][20190827145802651.png]  
**继续设置按钮样式,使其更加美观,设置动画属性,时长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秒*/
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70]  
**设置点击后的按钮样式,按钮宽度变为5rem(同高度相同),即呈现为一个正圆,并且按钮中文本’LOGIN’变为完全透明**

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

![在这里插入图片描述][20190827153207372.png]  
**在按钮中添加一组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;
    }

![在这里插入图片描述][20190827154349318.png]

**设置圆点的动画效果,为上下起伏,再将第二第三个圆点动画效果依次延迟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;
    }

![在这里插入图片描述][2019082716072830.png]  
![在这里插入图片描述][20190827160757466.png]  
**用 svg 绘制登陆成功后,在按钮上出现的,表示登陆成功的 √**

**设置类名为checkmark**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 1]

**设置 √ 初始时完全透明,且在圆点动画开始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;
        }
    }

![在这里插入图片描述][20190827192148547.png]  
![在这里插入图片描述][20190827192203763.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 2]

[20190827145111398.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2e0f0ba3657b4694995d50c9af84dc2d.png
[20190827145802651.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6aef82c79c9c4eebb9342260b9d8b481.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/aadb81a63c224e008f0446c12bf1147b.png
[20190827153207372.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/79bbd7b7881d4bae96e3b936496c15c1.png
[20190827154349318.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5cc9697eb5dd4452b67cd0c0793824bc.png
[2019082716072830.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6b988303cc214e7cb8283c57de400c84.png
[20190827160757466.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7b9e8c52701e42f5ba2e78670bda7386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d0176f0e2f9446208c6d402b588e1c48.png
[20190827192148547.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dc328e6b10fd442193f775701228cd99.png
[20190827192203763.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/78caac21c4424661a18320810779149f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d43b6a1686e14613aacdaf9f711269af.png