给Blog增加动画

看到zsnmwy大佬的博客，和我使用的是同样的主题，但是人家却多了一些动画，瞬间就高级起来了。于是打开百度搜素一波，发现只要改一下CSS就可以实现了。

# 准备工具

hugo的扩展版（extended）

这里一定要下扩展版，因为我使用的主题都是利用scss来生成css的，如果用普通版是无法利用scss生成对应的css的。之前不知道下的是普通版，结果怎么改scss都没有效果，浪费了很多时间😥。

# 23.7.13更新

现在优化了主题的编写方式，不需要修改原始的主题文件，降低了代码耦合😉。

只需要在HUGO_SITE_FOLDER/assets/scss/custom.scss文件里填写下面的内容就好了。

 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97


:root {
    --article-background: #f0f8ff;

    &[data-scheme="dark"] {
        --article-background: #292d30;
    }
}

// 文章列表
.article-list--compact article {
    //增加动画
    transition: .5s ease;

    &:hover {
        transform: scale(1.02, 1.02);
        background: var(--article-background);
    }

    .article-image img {
        // 变成长方形
        width: calc(var(--image-size) * 5 / 3);
        // 增加圆角
        border-radius: var(--card-border-radius);
    }
}

//头像
.sidebar header .site-avatar .site-logo {

    transition: all 1.75s ease-out;

    &:hover {
        transform: rotate(360deg);
    }
}

//菜单栏
.menu {
    //把auto改为visible，为了图标放大溢出时不显示滚动条
    overflow-y: visible;

    li {
        transition: .5s ease;

        &:hover {
            transform: scale(1.1, 1.1);
        }
    }
}

//文章头图
.article-list article .article-image {
    //避免出现滚动条
    overflow: hidden;

    img {
        //设置图片缩放
        transition: all .5s ease;

        &:hover {
            transform: scale(1.2);
        }

        @include respond(xl) {
            //加大图片高度
            height: 385px;
        }
    }
}

//友情链接三栏 (From https://blog.linsnow.cn/p/join-hugo-and-stack/)
@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        background: none;
        box-shadow: none;
        gap: 1rem;

        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: var(--card-border-radius);

            &:nth-child(odd) {
                margin-right: 8px;
            }

            .article-image img {
                // 恢复成正方形
                width: var(--image-size);
            }
        }
    }
}

同时增加了一些特效，这里就不展开说了🕊️

# 相关代码

# 1.头像转动

在themes/hugo-theme-stack/assets/scss/partials/sidebar.scss中增加以下代码：

1
2
3
4
5
6
7


.site-logo {      
	transition: all 1.75s ease-out;
}

.site-logo:hover {
	transform: rotate(360deg);
}

# 2.文章头图缩放

在themes/hugo-theme-stack/assets/scss/partials/article.scss中增加以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.article-image {
    overflow:hidden;
}
.article-image {
    img {
        transition:all .5s ease;
    }
    &:hover{
        transform:scale(1.2);
    }

# 3.Archives页面缩放

在themes/hugo-theme-stack/assets/scss/partials/article.scss中增加以下代码：

1
2
3
4
5
6
7
8
9


article{
	transition:.5s ease;
}
article {
    &:hover{
		transform:scale(1.05,1.05);
		background:#f0f8ff;
	}
}

# 4.菜单缩放

在themes/hugo-theme-stack/assets/scss/partials/menu.scss中增加以下代码：

1
2
3
4
5
6
7
8
9


overflow-y: visible;    //把auto改为visible，为了图标放大溢出时不显示滚动条
li {
	transition:.5s ease;
}
li{
    &:hover{
        transform:scale(1.1,1.1);
	}
}

有了动画后，感觉整个博客都变得高级起来了ヾ(•ω•`)o

在这感谢zsnmwy大佬，上面有些动画懒得自己写了，就直接从他的css中复制了ヾ(￣▽￣)