小聂子客栈

收藏CSS：Hover下划线收缩、蛇形边框

2019-10-16 热度 ℃

  1. hover下划线收缩
  2. 蛇形边框

hover下划线收缩

1
<div class="hover-line">Daily practice is the trick in learning a foreign language.</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.hover-line{
    display: inline-block;
    position: relative;
    line-height: 34px;
}
/* 伪元素作下划线 */
.hover-line:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: green;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .3s ease-out;
}
/* 浮动效果 */
.hover-line:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

蛇形边框

源码出自掘金-你未必知道的CSS知识点（第二季）
这个作者还有很多优秀的CSS效果

1
<div class="snake"></div>

需要注意的是：整体容器 = clientWidth(190px)+leftBorder(5px)+rightBorder(5px) = offsetWidth(200px)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.snake{
    position: relative;
    width: 190px;
    height: 190px;
    background-color: coral;
}
.snake:before,
.snake:after{
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
}
.snake:before{
    border: 5px solid green;
    animation: snakeMove 5s linear infinite;
}
.snake:after{
    border: 5px solid red;
    animation: snakeMove 5s linear infinite -2.5s;
}
@keyframes snakeMove{
    0%, 100%{
        clip: rect(0px, 200px, 5px, 0px);
    }
    25%{
        clip: rect(0px, 200px, 200px, 195px);
    }
    50%{
        clip: rect(195px, 200px, 200px, 0px);
    }
    75%{
        clip: rect(0px, 5px 200px, 0px);
    }
}

Tags: css
← 防抖和节流 肺炎——住院前篇 →

扫描二维码，分享此文章