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

最新推荐文章于 2024-04-16 14:16:52 发布

前后端杂货铺

最新推荐文章于 2024-04-16 14:16:52 发布

阅读量489

点赞数

文章标签： css 动画 css3

本文链接：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>

实现效果：

边框长度颜色动态改变动画

前后端杂货铺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css动态改变元素边框长度颜色，css动画效果

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;
复制链接

扫一扫