【Hugo】动画

我是直接把这些动画效果全放一个css文件了

创建一个hover-animation.css文件(可自定义)，然后记得在assets/scss/style.scss下添加@import "hover-animation"; 然后在创建的css文件添加以下代码

 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


/* 主页博客卡片 */
.article-list article {
    transition: transform 0.6s ease;
    -webkit-font-smoothing: antialiased;
    will-change: transform;
    transform-origin: center;

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

/* 左侧栏选项 */
#main-menu {
    overflow: visible;
    li {
        a {
            -webkit-font-smoothing: antialiased;
            will-change: transform;
            transition: transform 0.6s ease;
            &:hover {
                transform: scale(1.1, 1.1);
                will-change: transform;
            }
        }
    }
}

/* 归档和链接卡片 */
.article-list--compact {
    overflow: visible;
}

.article-list--compact article {
    transition: transform 0.6s ease;
    -webkit-font-smoothing: antialiased;
    will-change: transform;
    
    &:hover {
        transform: scale(1.05,1.05);
        z-index: 4;
    }
}

/* 分类页面 */
.article-list--tile article {
  transition: 0.6s ease;
}

.article-list--tile article:hover {
  transform: scale(1.05, 1.05);
  will-change: transform;
}

/* 右侧导航栏 */
// 搜索
.search-form.widget {
  transition: transform 0.6s ease;
}
.search-form.widget:hover {
  transform: scale(1.1, 1.1);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}

//归档
.widget.archives .widget-archive--list {
  transition: transform .3s ease;
  will-change: transform;
}
.widget.archives .widget-archive--list:hover {
  transform: scale(1.05, 1.05);
}

// 标签
.tagCloud .tagCloud-tags a {
  border-radius: 10px;
  font-size: 1.4rem;
  transition: transform .3s ease;
}
.tagCloud .tagCloud-tags a:hover {
  transform: scale(1.1, 1.1);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}

参数简单介绍:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 动画时间
transition: 0.6s ease;

// 放大
transform: scale(1.1, 1.1);

// 允许超出边框
overflow: visible;

// 这个是为了放大别出现字体抖动（但好像没什么效果）
will-change: transform;
-webkit-font-smoothing: antialiased;