超酷的CSS下划线动画:从代码到原理

.underlines {/* 基础样式 */line-height: 40px;cursor: pointer;/* 下划线核心动画 */background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;background-size: 02px;background-position: right bottom;transition: background-size 2s;}.underlines:hover {background-position: left bottom;background-size: 100%2px;}

<template><divclass="card"><divclass="title"><h3class="underlines">        趁风正好，趁年少疏狂，便该振衣赴山河，把酒话秋霜。</h3><spanclass="underlines">        不必困于市井琐碎，不必忧于前路迷茫，胸有丘壑者，自能踏破尘俗樊笼，在天地间寻得一方自在。看朝晖染透天际，便觉豪情漫过心头，看晚霞铺满天边，亦能笑揽清风入怀，这般潇潇洒洒，才不负此生一趟。        曾羡大鹏抟风九万里，今知我辈亦能逐光而行。不必畏他人眼光，不必拘世俗礼法，心之所向，素履以往。遇山开路时，便执剑斩荆棘；遇水架桥时，便扬帆破惊涛。纵有风雨来袭，亦能仰天长笑，以一身傲骨抗世事无常，以满腔热忱赴岁月滚烫。这般意气风发，方显少年模样。        人生本是旷野，而非轨道。何不抛却无谓牵绊，仗剑走天涯，看大漠孤烟，赏江南烟雨，听塞北秋风，品岭南茶香。把过往遗憾藏进行囊，把未来期许写进时光，步履不停，初心不忘。须知岁月从不负勇者，那些披荆斩棘的过往，终会成为照亮前路的光。        愿往后余生，能以疏狂赴山海，以坦荡对人生，不因失意而消沉，不因繁华而迷失。风起时，振翅翱翔；风静时，从容沉淀。这般意气风发，这般潇潇洒洒，方能不负韶华，不负此生。</span></div></div><divclass="card"><divclass="title title-one"><h3class="underlines">水调歌头・明月几时有（[宋] 苏轼）</h3><spanclass="underlines">明月几时有？把酒问青天。</span><br /><spanclass="underlines">不知天上宫阙，今夕是何年。</span><br /><spanclass="underlines">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</span      ><br /><spanclass="underlines">起舞弄清影，何似在人间。</span><br /><spanclass="underlines">转朱阁，低绮户，照无眠。</span><br /><spanclass="underlines">不应有恨，何事长向别时圆？</span><br /><spanclass="underlines">人有悲欢离合，月有阴晴圆缺，此事古难全。</span      ><br /><spanclass="underlines">但愿人长久，千里共婵娟。</span></div></div></template><stylelang="scss">.card {background: #ffff;margin: 15px;border-radius: 15px;.title {padding: 30px;font-size: 18px;h3 {width: fit-content;margin-left: 40px;      }.underlines {line-height: 40px;cursor: pointer;text-shadow: 09px3pxrgba(0, 0, 0, 0.3);background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;background-size: 02px;background-position: right bottom;transition: background-size 2s;        &:hover {background-position: left bottom;background-size: 100%2px;        }      }    }.title-one {text-align: center;h3 {margin: 0 auto;      }    }  }</style>