css实现文字下划线动效

效果视频

css实现文字下划线动效视频

实现思路

  • 首先,插入一段文字
  • 其次,为这段文字设置一个背景颜色,作为下划线的颜色。背景颜色的初始宽度设为0,初始高度设为2px;背景颜色的位置为文字的右下方
  • 然后,设置鼠标移入后的效果,位置变为文字的左下方,背景颜色的宽度变为100%
  • 最后,为了保证有丝滑的动态效果为这段文字设置一个过渡transition,是让背景的size有过渡效果

完整代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字下划线动效title>
    <style>
        div {
            padding-bottom: 5px;
            background: linear-gradient(to right, skyblue, pink);
            width: max-content;
            background-size: 0 2px;
            /* no-repeat 背景铺开方式为不重复 */
            background-repeat: no-repeat;
            background-position: right bottom;
            transition: background-size 1s;
            font-family: serif bold;
        }
        div:hover {
            background-position: left bottom;
            background-size: 100% 2px;
        }
    style>
head>
<body>
    <div>热爱可抵岁月漫长,温柔可挡艰难时光div>
body>
html>

你可能感兴趣的:(css,前端,下划线动效)