首先引入外部CSS文件和jquery ↓
在html中写出一个按钮 ↓
*{
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;
}
}
最后消除背景颜色,效果完成