动态下划线

?
1
2
3
4
5
6
7
8
9
.titleLine {
    background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 1000ms;
  }
  .titleLine:hover {
    background-position-x: left;
    background-size: 100% 2px;
  }

　　

?
1
2
3
<h3>
             <span class="titleLine">一天的工作保持好心情哦～</span>
           </h3>

　　

一天的工作保持好心情哦～

posted @   helloSWZ  阅读(69)  评论(0)  编辑  收藏  举报
相关博文：
· vue3 全局监听浏览器窗口变化，刷新当前页面布局
· 浏览器渲染原理
· css 下划线动态
· CSS 移入文字的时候让其出现下划线
· css文字下划线动画
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛