前言

前阵子在B站上看到了一个关于CSS和js的前端小案例视频，看完之后激发了我的兴趣，便跟着把代码码了一遍(url:https://www.bilibili.com/video/BV1Bx411f7PT?from=search&seid=10127959308870452063);

代码部分：

• html页面：只是一个简单的div+button布局

<div class="container">
			<button type="button" id="btn" class="login">
				<p id = "login-text">LOGIN</p>
				<div class="loading active">
					<div class="box"></div>
					<div class="box"></div>
					<div class="box"></div>
				</div>
			</button>		
		</div>

• js部分：原视频是采取引用jQuery的方案，我改为用原生js实现效果，个人觉得练手案例用原生js足以

<script type="text/javascript">
			var btn = $('#btn');
			var isClicked = false;
			//为按钮元素添加点击的事件监听，方便动态添加样式
			btn.addEventListener('click',function(){
				isClicked = true;
				if(isClicked == true){
					this.classList.add("active");			//点击按钮后动画显示
					$(".loading").style.opacity = 1;	//
					load(); //提供延时并关闭延时、去除样式的作用
					isClicked = false;
				}
				btn.firstElementChild.removeAttribute("class");
			});
			function $(attribution){ //将获取dom对象的原生方法封装起来，使用时更简洁
				return document.querySelector(attribution);
			}
			function load(){ //这个是改变对应的html元素样式的函数，
        //其中的timeOut函数的延时对应动画可以持续时间
				var login = setTimeout(function(){
					$(".loading").style.opacity = 0;
					btn.firstElementChild.innerText = "Yes";
					btn.firstElementChild.setAttribute("class","text");
					clearTimeout(this);				
				},3500);
			}
		</script> 

• CSS:样式这里不多说，懂得都懂，反正我是不懂啦

*{
	margin: 0;
	padding: 0;
}
.container{
	position: relative;
	top: 50px;
	background-color: antiquewhite;
	border-radius: 10px;
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
	margin: auto auto;	
}
/* click before */
.login{
	
	position: relative;
	background-color: black;
	color: white;
	font-size: 16px;
	border: none;
	outline: none;
	border-radius: 5rem;
	box-shadow: 0 5px 10px black;
		
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	transition: 0.8s;	
}
.login:hover{
	box-shadow: 0px 3px 3px black;
}

/* button clicked */
/*按钮被点击后添加的样式*/
.active.login{	
	width: 40px;
	color: transparent; 
	font-size: 0px;
	
}

/*按钮内部文字样式，有点击前样式和点击后动画样式*/
.text{
	color: antiquewhite;
	animation: 0.8s showLogin 0.3s ease-in-out forwards;
}
@keyframes showLogin{
	  0%{font-size: 0px;color: antiquewhite;}
	 10%{font-size: 1px;color: antiquewhite;}
	 20%{font-size: 1px;}
	 30%{font-size: 2px;color: antiquewhite;}
	 40%{font-size: 2px;color: antiquewhite;}
	 50%{font-size: 3px;}
	 60%{font-size: 3px;color: antiquewhite;}
	 70%{font-size: 4px;color: antiquewhite;}
	 80%{font-size: 4px;}
	 90%{font-size: 5px;color: antiquewhite;}
	100%{font-size: 6px;color: antiquewhite;}
	
	 
}


/* loading style start */
/*这里是承载图片中加载小圆点的容器*/
.loading{
	opacity: 0;
	transition: 0.5s;
}
/*容器被点击后的样式*/
.active.loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	
	width: 70%;
	height: 40%;
	border-radius: 1rem;
	/* 内容 */
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
}

/*加载动画的小圆点*/
.active.loading div{
	width: 0.3rem;
	height: 0.3rem;
	background-color: white;
	border-radius: 50%;
	animation: 0.8s load ease-in-out infinite alternate;
			
}
/*圆点动画*/
@keyframes load{
	to{ 
		transform: translate(0,-0.8rem);
	}
}

.active.loading div:nth-child(1){
	background-color: red;
	animation-delay: 0.1s;
}
.active.loading div:nth-child(2){
	animation-delay: 0.2s;
	background-color: deepskyblue;
}
.active.loading div:nth-child(3){
	background-color: #FAEBD7;
	animation-delay: 0.3s;
}

/* loadind style end */

效果：

最后说一下，本文相较于视频中的案例简化了许多，想看完整项目可到文章开头获取链接。码字不易，各位客官老爷帮忙给个赞