文字下划线效果(标题hover效果)
文字下划线效果(标题hover效果)
<!-- html结构 -->
<div>
<a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
</div>
/* css样式 */.demo1{position: relative;text-decoration: none;font-size: 20px;color: #333;}.demo1:before{content: "";position: absolute;left: 50%;bottom: -2px;width: 0;height: 2px;background: #4285f4;transition: all .3s;}.demo1:hover:before{width: 100%;left: 0;right: 0;}
关键在于没有hover的时候定义width为0,这样可以实现宽度从0到100%的变化。
left为50%,目的是为了动画开始的位置是在50%的位置。
方法二:
<!-- html结构 -->
<div><a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
</div>
/* css样式 */.demo2{position: relative;text-decoration: none;font-size: 20px;color: #333;}.demo2:before{content: "";position: absolute;left: 0;bottom: -2px;height: 2px;width: 100%;background: #4285f4;transform: scale(0);transition: all 0.3s;}.demo2:hover:before{transform: scale(1);}
这个实现的关键就是scale(0)到scale(1)的变化。
CSS3的scale transform的原点是中点,所以会从中间的位置开始动画。
两者区别
通过动画也看出来,next的动画有透明渐变的效果,和scale的表现形式有关。
第一个实现只是width变化,但是也可以用animation实现和next一样的效果。
文字下划线效果(标题hover效果)相关推荐
- 02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
- css文字下划线效果
css文字下划线效果 使用css实现下划线在鼠标放上去从左往右,离开也是从左往右的效果 利用 :hover 改变下划线的宽度,来实现这个效果 宽度改变的方向是从元素的定位来决定的,所以初始右定位设为0 ...
- html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
- php css下划线,CSS文字下划线的设置方法介绍
在整体网页设计中,最容易识别的风格仍然是带有下划线的蓝色文字,这大部分都是链接到另一个网页中.链接元素默认具有样式,蓝色是默认模式下的唯一颜色.即使现在的链接元素可能不再需要加下划线,文本下的行不仅仅 ...
- Unity的UGUI使用Text和Image实现文字下划线
Unity的UGUI使用Text和Image实现文字下划线 引子效果 设置 原文链接 引子效果 写需求的时候搜了一些文字加下划线的方法,UGUI的Text,大都需要写一堆代码来封装Text,比较麻烦. ...
- php css下划线,css下划线如何设置?css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
- 前端文字下划线的模拟
前端的文字下划线,我们可以处理的东西并不多,平时使用最多的就是a链接的text-decoration: none属性来去除下划线,这里给出利用背景来模拟下划线.做到相对而言的可以控制 a {font- ...
- Java 读取 Word文档的字体、字号、文字颜色、文字背景、文字是否加粗或倾斜、文字下划线、段落等属性
Work库:free spire.doc.jar 3.9.0 由于这个包比较大,maven依赖容易下载失败,故此提供百度云下载地址,下载地址在最下面 可支持读取字体.字号.文字颜色.文 ...
- css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法 发布时间:2020-08-31 13:54:27 来源:亿速云 阅读:65 作者:小新 这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
最新文章
- Mongo DB 2.6 需要知道的一些自身限定
- 智能车竞赛第十六届比赛参赛同学提问-环境参数-5月15
- linux php目录是否存在,PHP判断文件或者目录是否可写,兼容windows/linux系统
- 手把手 | 20行Python代码教你批量将PDF转为Word
- 找ipcore的地方
- shrio的rememberMe不起作用
- 记录一个自动创建分区的脚本
- 58如何调出eclipse左边文件栏
- Svn、Git、GitHub、GitLab、码云 区别
- [BZOJ4653 区间]
- Matlab实现——巧用灰色关联法完成“系统分析”与“综合评价”
- java解析bt协议详解_bt协议详解 基础篇(下)
- 《中国传统文化》慕课期末试题及答案
- Spring ClassPathResource详解
- 太赞了,为什么这么设计?
- 飞腾笔记本/银河麒麟桌面操作系统键盘无法使用
- pppoe协议和pppd源码分析
- Mindmanager2020教程篇画一个树状思维导图及试用密钥过期
- Unity3D摄像机跟随人物
- 江苏财经职业技术学校计算机专业怎么样,江苏财会职业学院好不好?排名怎么样评价如何...
热门文章
- 微信分享不显示右边缩略图
- HTTP协议基本格式
- 牛根生的“牛“,牛在哪里?
- 聚类分析(cluster analysis)
- 中草药创新的背后离不开技术革新
- ActiveMQ(二)
- springboot整合rabbitmq的发布确认,消费者手动返回ack,设置备用队列,以及面试题:rabbitmq确保消息不丢失
- Nature综述:人类微生物培养及培养组学culturomics
- 假如宋钦宗赵桓是一代明君,处理奸佞叛贼,开除主降派力排众议,文武并举。
- 对转义字符“\”的理解