前端实战小案例--炫酷动态登录按钮
所谓实战才是检验真理的唯一标准，所以光看书、视频，不动手是没任何进步的！
作为小白的我准备做一个实战案例专栏，上网搜集一些案例，自己敲一遍并理解，写下详细的注释供各位一起学习进步，
想跟我一起脱离看视频，动手学习的请到我的个人主页->前端实战专栏：传送门，
一起照着例子敲吧，看源代码前请自己先思考一下，敲完记得再看一遍！一起加油！！！
觉得好的记得点赞(*^__^*) 嘻嘻！
效果图：
代码如下：（上面写了很详细的注释，不懂的可以评论，我解释）
<!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>
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
