js拉钩网注册登录界面的下划线动画实现

最新推荐文章于 2022-03-15 11:43:27 发布

tfbyly

最新推荐文章于 2022-03-15 11:43:27 发布

阅读量370

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/tfbyly/article/details/80261486

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>拉钩登录界面注册效果实现</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				width: 300px;
				height: 30px;
				border-bottom: 1px solid #EBEBEB;
				padding-bottom: 5px;
				position: relative;
			}
			
			li {
				list-style: none;
				text-align: center;
				width: 150px;
				float: left;
				cursor: pointer;
			}
			
			.active {
				color: #1ACBFC;
			}
			.underline{
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 150px;
				height: 1px;
				background: #1ACBFC;
				transition: .5s;
			}
			
			.underline:before {
				content: '';
				width: 0;
				height: 0;
				border: 6px solid transparent;
				border-bottom-color: #1ACBFC;
				position: absolute;
				left: 50%;
				margin-left: -6px;
				bottom: 0;
			}
			.underline:after {
				content: '';
				width: 0;
				height: 0;
				border: 6px solid transparent;
				border-bottom-color: white;
				position: absolute;
				left: 50%;
				bottom: -1px;
				margin-left: -6px;
				
			}
			
		</style>
	</head>

	<body>
		<ul>
			<li class="active">手机号码登录</li>
			<li>邮箱登录</li>
			<span class="underline"></span>
		</ul>
		
		<script>
			var positions=[0,'150px'];
			var underlineDom=document.querySelector('.underline');
			var lis=document.querySelectorAll('li');
			for(var i=0;i<lis.length;i++){
				lis[i].οnclick=function(i){
					return function(){
					for(var j=0;j<lis.length;j++){
						lis[j].style.color='black';
					}
						lis[i].style.color='#1ACBFC';
						underlineDom.style.left=positions[i];
					
					
					}
				}(i)
				
			}
		</script>
	</body>

</html>

tfbyly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拉钩网注册登录界面的下划线动画实现

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拉钩登录界面注册效果实现&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; } u
复制链接

扫一扫