原文链接: 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