美化-网页主题切换的渐变动画
如何让网页切换主题时优雅的呈现渐变过程
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--expo-in: linear(
0 0%, 0.0085 31.26%, 0.0167 40.94%,
0.0289 48.86%, 0.0471 55.92%,
0.0717 61.99%, 0.1038 67.32%,
0.1443 72.07%, 0.1989 76.7%,
0.2659 80.89%, 0.3465 84.71%,
0.4419 88.22%, 0.554 91.48%,
0.6835 94.51%, 0.8316 97.34%, 1 100%
);
--expo-out: linear(
0 0%, 0.1684 2.66%, 0.3165 5.49%,
0.446 8.52%, 0.5581 11.78%,
0.6535 15.29%, 0.7341 19.11%,
0.8011 23.3%, 0.8557 27.93%,
0.8962 32.68%, 0.9283 38.01%,
0.9529 44.08%, 0.9711 51.14%,
0.9833 59.06%, 0.9915 68.74%, 1 100%
);
}
html.light {
background-color: #fff;
}
html.dark {
background-color: #000;
}
::view-transition-group(root) {
animation-timing-function: var(--expo-in);
}
::view-transition-new(root) {
mask: url('https://media.tenor.com/cyORI7kwShQAAAAi/shigure-ui-dance.gif') center / 0 no-repeat;
animation: scale 3s;
animation-fill-mode: both;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
animation: scale 3s;
animation-fill-mode: both;
}
@keyframes scale {
0% {
mask-size: 0;
}
10% {
mask-size: 50vmax;
}
90% {
mask-size: 50vmax;
}
100% {
mask-size: 2000vmax;
}
}
</style>
</head>
<body>
<button onclick="useToggle()">切换</button>
</body>
<script>
const localTheme = typeof localStorage !== "undefined" && localStorage.getItem("hexo-theme")
let theme = localTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
document.documentElement.className = theme
function switchTheme() {
theme = theme === "dark" ? "light" : "dark"
document.documentElement.className = theme
localStorage.setItem("hexo-theme", theme)
}
function useToggle() {
const isAppearanceTransition = document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches
if (!isAppearanceTransition) switchTheme()
document.startViewTransition(switchTheme)
}
</script>
</html>解决css卡顿
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/will-change