CSS实现下划线动画的各种姿势

CSS实现下划线动画的各种姿势

该文章还在施工中… 过几天再来看吧。

在背景图片上做手脚

思路就是 先让 background-image 限定在一定的高度,之后 :hover 时再用动画调整宽度

STEP1: background-image

1
2
3
4
5
6
7
8
9
10
11
.underline {
background-image: linear-gradient(transparent calc(100% - 10px), black 10px);
background-repeat: no-repeat;
// 或者
background-image: linear-gradient(120deg, #7af7a9 0%, #FFEB3B 100%);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 88%;
// 或者
background-image: linear-gradient(transparent 0%, transparent 65%, yellow 65%, yellow 90%, transparent 90%, transparent);
}

STEP2:

1
2
3
4
5
6
7
8
.underline {
background-size: 0% 100%;
transition: background-size .3s ease-in;

&:hover {
background-size: 100% 100%;
}
}

在 border 上做手脚

1
2
3
4
5
.underline {   
border-bottom: .4em solid transparent;
border-image: linear-gradient(to right, #A8DBED 0%, #E291E6 100%);
border-image-slice: 1;
}

使用伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h1 {
position: relative;
z-index: 0;

&::before {
position: absolute;
transition: .3s;
content: '';
width: 0%;
left: 0;
bottom: 0;
height: 16px;
background: lightpink;
z-index: -1;
}
&:hover::before {
width: 100%;
}
}

使用阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.title .shadow {
.is-red {
box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
}
.is-turquoise {
box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
}
.is-purple {
box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
}
.is-yellow {
box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
}
}

评论

Blog tasks

1 / 4 tasks

  • About 页面大修

    • Mark done
    • Edit
    • Delete
  • TOC 滚动更新位置
  • 设计 Logo SVG

    • Mark done
    • Edit
    • Delete
  • todo 小组件大小单位用 rem

    • Mark done
    • Edit
    • Delete
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×