css 伪类 transform transition实现一个比较好看的下划线过渡效果

最新推荐文章于 2024-01-09 15:18:27 发布

阿豪boy

最新推荐文章于 2024-01-09 15:18:27 发布

阅读量465

点赞数

文章标签： css sms nagios less etl

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064736

版权

原文链接: css 伪类 transform transition实现一个比较好看的下划线过渡效果

上一篇: css 自定义属性和雪花飘落效果

下一篇: cocos draw call 优化实现超多节点的彩色拖尾

效果如下, 在悬浮的时候下划线会从左到右出现, 鼠标离开时消失

主要使用了伪类和动画

可以修改前面定义的css变量改变颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* :root {
        --main-color-1: rgba(246, 73, 167, 0.1);
        --main-color-2: rgba(246, 73, 167, 0.2);
        --main-color-3: rgba(246, 73, 167, 0.3);
        --main-color-4: rgba(246, 73, 167, 0.4);
        --main-color-5: rgba(246, 73, 167, 0.5);
        --main-color-6: rgba(246, 73, 167, 0.6);
        --main-color-7: rgba(246, 73, 167, 0.7);
        --main-color-8: rgba(246, 73, 167, 0.8);
        --main-color-9: rgba(246, 73, 167, 0.9);
        --main-color-10: rgba(246, 73, 167, 1);
      } */

      :root {
        --main-color