纯css实现文字下划线悬浮【中心向两边扩展】、鼠标移开【两边向中心收缩】特效

最新推荐文章于 2023-03-25 12:34:57 发布
最新推荐文章于 2023-03-25 12:34:57 发布
阅读量732 收藏 1
点赞数
分类专栏： css 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dknightl/article/details/107898108
版权
笔记 同时被 2 个专栏收录
43 篇文章 0 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏

文字鼠标悬浮效果有很多，自己做的时候也手撸了一个小特效。

思路就是使用before和after伪类去动态改变宽度。

代码已经关联到github： 链接地址
觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

效果：
在这里插入图片描述

Qssn丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3+伪元素实现鼠标移入时下划线向两边展开的效果
09-24
主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料，文中先进行了详细的介绍，方便大家理解，而后给出了完整的实例代码让大家可以参考学习，需要的朋友们下面来一起学习学习吧。
多款炫酷鼠标悬停图文动画效果特效代码
03-20
纯CSS3实现的鼠标悬停动画效果，各种炫酷动画，用户体验非常好 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
html在字体两边加直线,css怎么在文字两边加上横线
weixin_30980893的博客
05-31 3169
css中可利用:before、:after和content属性来在文字两边加上横线；语法“E:before,E:after{content:"";flex:1 1;border-bottom:2px solid;}”，E为包含文字的元素。本教程操作环境：Windows7系统、css3版本、Dell G3电脑。css在文字两边加上横线的方法在css中，可以利用:before、:after选择器和co...
CSS 文字下面横线
felicity_zll的博客
06-11 2908
.active{ position:relative; color:#ff0005; } .active::before{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); content:''; width:50rpx; height:5rpx; border-radius:5rpx; background-color:...
html鼠标悬浮缩放,CSS3鼠标悬浮过渡缩放效果
weixin_36463292的博客
06-04 430
以下为一个纯css写的图片鼠标悬浮缩放效果，其实基本原理十分简单，我们访问一些网站可以发现他们都会对图片做一些交互效果的处理，当然实现图片过渡效果有很多方式，例如使用JQuery或者一些第三方js动画库，本例仅是展示基本的效果，不对所用知识进行归纳。代码如下：Document* {box-sizing: border-box;}body {background-color: rgb(251, 16...
文字的前后伪类装饰
白白的博客
02-06 174
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid r.
纯CSS，利用before、after伪元素实现的几种链接hover效果一：旋转下划线加链接文字上闪效果
dpdesign的博客
11-30 1539
初始下划线为短线，垂直在链接左侧-20px位置，hover后旋转并伸长至链接文字下方，形成下划线效果。这里主要用到transform的rotate属性。说明：利用before和after伪元素实现链接文字hover双重效果，也可以单独使用一种。初始为读取文字覆盖在链接文字上，hover后向上闪出。
CSS之伪元素 ::before
平平无奇小码农的博客
01-22 7819
这里写目录标题1、 伪元素不设置display：block，也不设置宽高2、 伪元素设置display：block，不设置宽高2、 伪元素设置display：block，设置宽高 1、 伪元素不设置display：block，也不设置宽高 <style> .div6 { width: 200px; height: 100px; margin: 100px; background-color: yellow; } .d
css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇
草巾冒小子的博客
03-27 8704
css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇 1. 水平方向 2. 垂直方向： .name{padding-left: 46px;padding-top: 15px;font-size: 18px;color: #333;position: relative;} .name:before{position: ...
css实现hover多行文字出现下划线
m0_47435082的博客
03-25 874
玩转CSS，实现鼠标hover文字文字底部出现渐变线条，效果如下。屏幕录制2023-03-23 21.31.18。
2021-4-29 工作记录--CSS-鼠标划过文字时，文字下方出现往两边延伸的下划线 + 鼠标划过文字，文字下面的下划线向中间消失；鼠标离开文字，文字下面的下划线向两边延申出现
weixin_48850734的博客
11-22 722
一、CSS-鼠标划过文字时，文字下方出现往两边延伸的下划线 方法1： 举例： HTML: CSS: 对应代码： //css鼠标划过文字出现往两边延伸的下划线 .header_l li a, .header_r li:not(:last-child) a { position: relative; padding: 14px 0; } .header_l li a::before, .header_r li:not(:last-child) a::before { content: '
鼠标移入下划线由中心向两边展开
01-07
鼠标移入下划线由中心向两边展开
CSS3鼠标悬停链接文字下划线动画特效
06-11
带方向感知的CSS3鼠标悬停链接文字下划线动画特效，可以用来做导航菜单效果。
css实现文字居中两边横线效果的示例代码
09-22
主要介绍了css实现文字居中两边横线效果的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序页面使内容充满整个屏幕（高度、宽度100%），并使内容水平和竖直都居中
热门推荐
qssn的博客
07-28 7万+
很多时候，我们会希望将内容充满整个屏幕（高度、宽度100%），如下图 代码如下wxml页面代码 <view class="empty_tip "> <image class="" src="../../image/empty_cart.png" mode="widthFix"></image> <view class="classname">购物车竟然是空的</v
微信小程序引用同一js文件中的方法函数（function）
qssn的博客
07-27 4万+
在小程序的js文件中，有时候我们也要复用同一js的一个或多个方法。 微信小程序引用同一js文件中的方法函数（function）
微信小程序点击移除添加class（点击改变背景颜色和字体颜色）
qssn的博客
07-25 2万+
微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。 点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 <!--页面--> <view class="info_choose "> <view class="catalog_name
easyui子窗口（window）中关闭当前窗口，子页面关闭当前tab
qssn的博客
04-13 1万+
easyui中，我们经常需要在创建的窗口window中关闭当前窗口，或者tab的子页面中关闭当前tab页面。下面给出方法（此方法只适用于一次父子嵌套）。 子窗口页面（window）中关闭当前窗口 //子页面JS方法 function getCloseModuleWin(){ console.log(window.parent.closeModuleWin()); }//父页面JS方法
iText7彻底解决中文问题、特殊字符（如......省略号报错问题，其他的自测）
qssn的博客
06-13 1万+
com.itextpdf.kernel.font.PdfType0Font.getCidFontType2(PdfType0Font.java:720) iText7彻底解决中文问题、特殊字符（如......省略号报错问题）
用表格实现css两边文字中间图片且两边文字对称靠近图片
最新发布
06-10
首先，创建一个包含三列的表格，将文字和图片分别放置在第一列和第三列，然后使用CSS样式来设置单元格的对齐方式和间距，使两边的文字对称成块靠近图片。 下面是一个示例代码： HTML： ```html 左边的文字 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值