02 css实现文字下划线动画效果

实现文字下划线从中间向两端延伸的动画效果，主要是通过css的transform和transition属性来实现，下面直接粘贴代码和效果图：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.testStyle{position:relative;width: 8%;       /*控制字体下划线的长度*/}.testStyle::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;}.testStyle:hover::after{/*鼠标经过时还原到正常比例*/transform:scale3d(1,1,1);}</style></head><body><div><h1 class="testStyle">测试文字</h1></div></body>
</html>

02 css实现文字下划线动画效果相关推荐

css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
CSS3技巧30：简单而实用的CSS导航下划线动画效果
2021 结束了迎来了 2022 回望这一年,收获了不少,也失去了很多. -------------------------------------------------------------- ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果
众所周知,超链接元素在默认情况下鼠标滑过时会出现一条下划线.默认的超链接下划线动画十分的生硬,我们可以通过一些简单的处理,来制作出带平滑过渡效果的超链接下划线动画效果. 先来体验一下这个超链接动画的效 ...
导航菜单中常用的css下划线动画效果-案例
导航栏下划线动画在网页设计中是非常常见的交互在线展示代码 <!DOCTYPE html> <html><head><meta charset=" ...
css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: <ul id="list"><li class="current_li">&l ...
html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: js:主要是为了刷新页面,让第一个li默认有下划线和选中效果 css: /*下划线跟随*/ ul{ display: flex; positi ...

02 css实现文字下划线动画效果

02 css实现文字下划线动画效果相关推荐

最新文章

热门文章