新建Css文件

写入以下代码，并inject到头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*10s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
#page-header,
#web_bg {
    -webkit-animation: imgblur 10s 1 ease-in-out;
    animation: imgblur 10s 1 ease-in-out;
}
@keyframes imgblur {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0px);
  }
}
/*适配使用-webkit内核的浏览器 */
@-webkit-keyframes imgblur {
  0% {
    -webkit-filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
  }
}


指定页面

在对应页面的markdown里面写入以下代码

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
{% raw %}
<style>
/*10s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
#page-header,
#web_bg {
    -webkit-animation: imgblur 10s 1 ease-in-out;
    animation: imgblur 10s 1 ease-in-out;
}
@keyframes imgblur {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0px);
  }
}
/*适配使用-webkit内核的浏览器 */
@-webkit-keyframes imgblur {
  0% {
    -webkit-filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
  }
}
</style>
{% endraw %}