前端实战小案例——炫酷动态登录按钮- 校招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>