css是你永远学不会的语言

最新推荐文章于 2024-08-09 18:43:30 发布

雾恋

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量86

点赞数

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_50307964/article/details/130841422

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3DQ4ysc-1684894281092)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/636e0b101be54538a77c434b1b775733~tplv-k3u1fbpfcp-watermark.image?)]

分析：

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

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

我是没有想出来的，我用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相关的一些东西

如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】

雾恋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css是你永远学不会的语言

在网上冲浪的时候，看到有这么一个网页效果；如下图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3DQ4ysc-1684894281092)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/636e0b101be54538a77c434b1b775733~tplv-k3u1fbpfcp-watermark.image?)]
复制链接

扫一扫

专栏目录