css是你永远学不会的语言

在网上冲浪的时候，看到有这么一个网页效果；如下图：

20230330_10：43：33_1.gif

分析：

从图中我们可以看出，当我们鼠标移入的时候，下划线冲左侧开始展示；当鼠标移出的时候，下划线从左侧开始消失

既然我们知道了大致的效果，那我们就得想想怎么实现这个效果了。

我是没有想出来的，我用F12查看了一下；如下图代码：

未移入样式：

微信图片_20230330105126.png

移入样式（hover）：

微信图片_20230330105126.png

代码分析

背景色渐变以及方向（移入移出）
背景大小
过度时间

示列代码

解释：

我们在css中写span的样式时；background需要禁止平铺，然后是靠右（right）并且是底部的；原因是以为收回去的时候需要方向是右侧（right）；然后background-size需要将宽度设置为0 高度为2（你可以根据自己的需要设置）；最后是给background-size一个过度效果既可以
然后hover事件的时候需要将定位给到左侧（left）并且将background-size宽度百分之百；这样就会根据过度时间显示完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            color: #333;
            line-height: 2px;
        }

        .title span {
            background: linear-gradient(to right, #ec695c,#61c454) no-repeat right bottom;
            background-size: 0 2px;
            transition: background-size 1300ms;
        }
        .title span:hover {
            background-position-x: left;
            background-size: 100% 2px;
        }
    </style>
</head>
<body>
    <h2 class="title">
        <span>
            Migrating From MySQL to YugabyteDB Using YugabyteDB Voyager</span>
    </h2>
</body>
</html>

以上就是今天的全部内容了！大家可以复制以上代码，即可展现效果。

当我做了以后发现，css真的是我的弱势；或者说大部分人都不怎么关注css；毕竟面试的时候大部分公司都不是很要求这个，从而我们就忽略了个语言；css真的我永远学不会的语言啊

后面我也就开一个专辑，我所遇到的css相关的一些东西

往期文章