css3实现下划线动画效果

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

TowYingWang

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

阅读量1.1w

点赞数 9

分类专栏：开发踩坑与技巧文章标签： css3 动画

本文链接：https://blog.csdn.net/xiaoermingn/article/details/52940067

版权

效果

制作gif的时候有卡顿

这里写图片描述

方法

通过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%;
		}
	</s

最低0.47元/天解锁文章

TowYingWang

关注

9
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
css3实现下划线动画效果

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

扫一扫