css动态改变元素边框长度颜色，css动画效果

最新推荐文章于 2024-09-28 01:23:25 发布

前后端杂货铺

最新推荐文章于 2024-09-28 01:23:25 发布

阅读量544

点赞数

文章标签： CSS动画边框颜色边框长度过渡效果 hover

本文链接：https://blog.csdn.net/qq_36604863/article/details/124950938

版权

css动态改变元素边框长度颜色，css动画效果

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		html,body,#page{
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
		.border_test{
			width: 30%;
			height: 2rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-bottom: 1px solid #efefef;
			transition:all 0.2s ease;
		}
		.border_test:hover{
			width: 50%;
			height: 2rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-bottom: 1px solid #416ED3;
		}
	</style>
	<body>
		<div id="page">
			<div class="border_test">
				
			</div>
		</div>
	</body>
</html>