【校招VIP】炫酷动态登录按钮

06月26日 收藏 0 评论 0 前端开发

【校招VIP】炫酷动态登录按钮

转载声明:原文链接:https://blog.csdn.net/qq_16687863/article/details/100243007

前端实战小案例--炫酷动态登录按钮
所谓实战才是检验真理的唯一标准,所以光看书、视频,不动手是没任何进步的!
一起照着例子敲吧,看源代码前请自己先思考一下,敲完记得再看一遍!一起加油!!!

效果图:

代码如下:(上面写了很详细的注释,不懂的可以评论)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>炫酷动态登录按钮</title>
<style>

html,body{
/* 初始化html,body原始样式 */
margin: 0;
padding: 0;
}

body{
/* 设置 body的样式,并设置内容为垂直和水平都居中*/
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 按钮样式开始 */
.login{
/* 定义按钮样式,设置为相对定位,作为后面的loading和checkmark的参照物 */
position: relative;
border: none;
outline: none;
width: 12rem;
height: 5rem;
border-radius: 5rem;
background-color: #000;
color: #FFF;
font-weight: bold;
font-size: 1.5rem;
box-shadow: 0 8px 28px #000000;
cursor: pointer;

transition: 0.5s;
}
.login.active{
width: 5rem;
color: transparent;
}
/* 按钮样式结束 */

/* 三个点loading. . .动态样式开始 */
.loading{
opacity: 0;
transition: 0.5s;
}
.active .loading{
/* 该方式用来进行垂直和水平居中,left和top是相对父元素移动,
transform是相对自己的初始位置移动 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

width: 70%;
height: 40%;

/* 该样式用于将三个点...水平放置 */
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{
/* 该样式规定三个点...在Y方向上上下移动 */
from{transform: translateY(0);}
to{transform: translateY(-1rem);}
}
/* 下面三个样式用于将三个点...的移动时间设置的不一样,产生一种此起彼伏的感觉 */
.active .loading div:nth-child(2){
animation-delay: 0.2s;
}
.active .loading div:nth-child(3){
animation-delay: 0.4s;
}
.verity .loading{
opacity: 0;
}
/* 三个点loading. . .动态样式结束 */

/* 对勾checkmark开始 */
.checkmark{
/* 该样式用于将内容垂直水平居中 */
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%,-50%);

/* 该样式用于设置svg的宽高、线粗细、颜色等等 */
width: 1.875rem;
height: 1.875rem;
stroke: white;
fill: none;
stroke-width: 0.125rem;

/* 该样式用于产生对勾✔的慢慢绘制出来的效果 */
/* stroke-dasharray: 2.25rem;
stroke-dashoffset: 2.25rem;
不懂的可以将stroke-dashoffset的值一点一点的减小看效果*/
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;}
}
/* 对勾checkmark结束 */
</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 src="../jquery-2.1.1/jquery.js"></script>
<script>
// 当点击注册按钮时,为按钮添加一个active类,从而为其增加已经写好的CSS样式
$($(".login").click(
function(){
$(this).toggleClass("active");

// toggleClass为切换属性:有这个属性则删除这个属性,没有则添加
// 如果它有着verity属性,则立即删除这个属性
// 如果没有则延迟2秒添加这个属性
if($(this).hasClass('verity')){
$(this).toggleClass('verity');
}else{
// 在这里请注意this的指向问题
// 如果将代码改成这样就会报错,
// 因为此时的this指向的是window
// 而不是你希望的登录按钮
// setTimeout(function() {
// $(this).toggleClass('verity');
// }, 2000);
setTimeout(() => {
$(this).toggleClass('verity');
}, 2000);
}

}

))
</script>
</html>


C 0条回复 评论

帖子还没人回复快来抢沙发