下划线动画效果

小羊网页模板

已于 2024-01-31 17:36:54 修改

阅读量82

点赞数

文章标签： css

于 2021-07-25 11:55:10 首次发布

本文链接：https://blog.csdn.net/m0_58717408/article/details/119079664

版权

方法

通过css3的transform和transition属性来实现

代码

下划线从左到右效果

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8"/>
    <title>下划线动画</title>
    <style>
        /*先把a的原有下划线样式给清除*/
        a,a:link,a:visited,a:focus{
            text-decoration:none;color:#000;
        }
        /*设置a的定位，给我们自己编写的下划线一个定位参考*/
        .left-to-right{
            position:relative;
        }
        /*使用伪类给a下面添加下划线*/
        /*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/
        .left-to-right::after{
            content:'';
            display:block;
            /*开始时候下划线的宽度为0*/
            width:0;
            height:3px;
            position:absolute;
            left:0;
            bottom:-10px;
            background:#000;
            /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
            transition:all 0.3s ease-in-out;
        }
        .left-to-right:hover::after{
            width:100%;
        }
    </style>
</head>
<body>
<a href="#" class="left-to-right">鼠标经过从左向右延伸的下划线</a>
</body>
</html>

下划线从右到左效果

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<title>下划线动画</title>
	<style>
		a,a:link,a:visited,a:focus{
			text-decoration:none;color:#000;
		}
		.right-to-left{
			position:relative;
		}
		.right-to-left::after{
			content:'';
			display:block;
			width:0;
			height:3px;
			position:absolute;
			right:0;   /*区别就是开始时在右边*/
			bottom:-10px;
			background:#000;
			transition:all 0.3s ease-in-out;
		}
		.right-to-left:hover::after{
			width:100%;
		}
	</style>
</head>
<body>
<a href="#" class="right-to-left">鼠标经过从右向左延伸的下划线</a>
</body>
</html>

下划线从中间向两端延伸效果

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<title>下划线动画</title>
	<style>
		a,a:link,a:visited,a:focus{
			text-decoration:none;color:#000;
		}
		.center-to-head{
			position:relative;
		}
		.center-to-head::after{
			content:'';
			display:block;
			/*开始时候下划线的宽度为100%*/
			width:100%;
			height:3px;
			position:absolute;
			bottom:-10px;
			background:#000;
			transition:all 0.3s ease-in-out;
			/*通过transform的缩放scale来让初始时x轴为0*/
			transform: scale3d(0,1,1);
			/*将坐标原点移到元素的中间，以原点为中心进行缩放*/
			transform-origin:50% 0;
		}
		.center-to-head:hover::after{
			/*鼠标经过时还原到正常比例*/
			transform:scale3d(1,1,1);
		}
	</style>
</head>
<body>
<a href="#" class="center-to-head">鼠标经过从中间向两端延伸的下划线</a>
</body>
</html>

小羊网页模板

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下划线动画效果

方法通过css3的transform和transition属性来实现代码下划线从左到右效果<!DOCTYPE><html><head> <meta charset="utf-8"/> <title>下划线动画</title> <style> /*先把a的原有下划线样式给清除*/ a,a:link,a:visited,a:focus{...
复制链接

扫一扫