日志-2024-09-18

calendar 2024-09-18 · 2 分钟阅读 · 日志  ·
复制链接: copy

我又给 <a> 标签加了一个酷酷的 hover 效果，有下面两种 <a> 标签使用了 hover 效果：

  • 没有 class 和 title 属性
  • class 属性中有 nav_item 但没有 nav_brand

我把自定义的效果写成 SASS 格式并写到主题给的 _custom.sass 文件里。

 1a
 2    &:not([class]):not([title])
 3        position: relative
 4        &:after
 5            content: ''
 6            position: absolute
 7            left: 0
 8            bottom: -5px
 9            display: inline-block
10            height: 1px
11            background-color: #0077b8
12            width: 0
13            opacity: 0
14            transition: opacity 0.35s, width 0.35s
15        &:hover:after
16            opacity: 1
17            width: 100%
18    &.nav_item:not(.nav_brand)
19        position: relative
20        &:after
21            content: ''
22            position: absolute
23            left: 0
24            bottom: -5px
25            display: inline-block
26            height: 1px
27            background-color: #0077b8
28            width: 0
29            opacity: 0
30            transition: opacity 0.35s, width 0.35s
31        &:hover:after
32            opacity: 1
33            width: 100%

代码块标上 SASS 会导致渲染出错，故标成 CSS。

同时我给其他博客的链接创建了卡片，也是使用 shortcode：

 1{{/* friend.html */}}
 2
 3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 4
 5{{ $link := .Get "link" }}
 6{{ $img := .Get "img" }}
 7{{ $txt := .Get "txt" }}
 8
 9<div class="friend-link-card">
10    <div class="friend-content">
11        <div class="friend-imgBx">
12            <img src="{{ $img }}">
13        </div>
14        <div class="friend-text-content">
15            <a href="{{ $link }}" target="_blank" rel="noopener noreferrer">{{ $txt }}</a>
16        </div>
17    </div>
18</div>
19
20<style>
21    .friend-link-card * {
22        margin: 0;
23        padding: 0;
24        box-sizing: border-box;
25    }
26
27    .friend-link-card {
28        padding: 0.5rem 1rem;
29        width: 25%;
30        outline: none;
31        color: var(--text);
32        background: var(--post-bg);
33        border: 1px solid var(--border);
34        border-radius: 8px;
35        font-size: 1rem;
36        box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
37        margin-top: 10px;
38        min-width: 300px;
39    }
40
41    .friend-content {
42        display: flex;
43        align-items: center;
44    }
45
46    .friend-imgBx {
47        position: relative;
48        margin-right: 40px;
49        padding: 10px 0;
50    }
51
52    .friend-imgBx img {
53        width: 80px;
54        height: 80px;
55        border-radius: 50%;
56        display: block;
57    }
58
59    .friend-text-content {
60        flex: 1;
61        position: relative;
62    }
63
64    .friend-text-content a:after {
65        content: '';
66        position: absolute;
67        left: 0;
68        bottom: -5px;
69        display: inline-block;
70        height: 1px;
71        background-color: #0077b8;
72        width: 0;
73        opacity: 0;
74        transition: opacity 0.35s, width 0.35s;
75    }
76
77    .friend-text-content a:hover:after {
78        opacity: 1;
79        width: 100%;
80    }
81</style>