CSS 实现元素底边框从中间缓慢展开效果

RETURN100ERRORS

已于 2022-04-01 21:21:00 修改

阅读量1.9k

点赞数

分类专栏： CSS 文章标签： java spring css3

于 2022-04-01 21:16:51 首次发布

本文链接：https://blog.csdn.net/RETURN100ERRORS/article/details/123908044

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

主要利用了 transform : scale(0) -> transform : scale(1); 实现 ,
scale 在 transition 动画中默认从 x轴中间和 y轴中间开始展开，并可以使用 transform-origin 改变出现方位
具体参考代码 , 我用伪元素实现了一下,此为三角展开:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="application/javascript" src="js/vue.js"></script>
	</head>
	<style>
		a{
			display: inline-block;
			line-height: 30px;
			padding: 0 10px;
			cursor: pointer;
			position: relative;
		}
		a::after{
			content: "";
			border-bottom: red solid 2px;
			display: block;
			transform: scale(0);
			transition:all 0.2s ease-out 0s; 
		}
		
		a::before{
			content: "";
			border-left: red solid 2px;
			display: block;
			position: absolute;
			top: 100%;
			left: 50%;
			height: 20px;
			transform: scale(0);
			transform-origin: center top;
			transition: all 0.2s ease-out 0s; 
		}
		
		a:hover::after,a:hover::before{
			transform: scale(1);
		}
	</style>
	<body>
			<a> 首 页 </a>
			<a> 学院官网 </a>
			<a> 加入我们 </a>
			<a> 捐 赠 </a>
	</body>
	
	<script>
		
	</script>

</html>

RETURN100ERRORS

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现元素底边框从中间缓慢展开效果

主要利用了 transform : scale(0) -> transform : scale(1); 实现 ,scale 在 transition 动画中默认从 x轴中间和 y轴中间开始展开，并可以使用 transform-origin 改变出现方位具体参考代码 , 我用伪元素实现了一下,此为三角展开:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>
复制链接

扫一扫