extern/nixos-and-flakes-book
1
0
Fork 0
mirror of https://github.com/ryan4yin/nixos-and-flakes-book.git synced 2024-11-29 03:24:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: update animation

Browse Source
This commit is contained in:
Ryan Yin 2023-08-14 23:17:58 +08:00
parent 50ec195218
commit b800157301
2 changed files with 4 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/index.md
View File

@ -32,33 +32,21 @@ hero:
<style> <style>
:root { :root {
--vp-home-hero-name-color: transparent; --vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #4565d8 40%, #41d1ff);
--vp-home-hero-image-background-image: linear-gradient(-60deg, #bd34fe 40%, #47caff 60%); --vp-home-hero-image-background-image: linear-gradient(-60deg, #41d1ff 40%, #0fffc1);
--vp-home-hero-image-filter: blur(40px);
} }
.image-bg { .image-bg {
position: absolute;
content: "";
top: 5vw;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.75); transform: scale(0.75);
-webkit-filter: blur(5vw); -webkit-filter: blur(5vw);
-moz-filter: blur(5vw); -moz-filter: blur(5vw);
-ms-filter: blur(5vw); -ms-filter: blur(5vw);
filter: blur(5vw); filter: blur(5vw);
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size: 200% 200%; background-size: 200% 200%;
animation: animateGlow 10s ease infinite; animation: animateGlow 10s ease infinite;
} }
@keyframes animateGlow { @keyframes animateGlow {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;

16
docs/zh/index.md
View File

@ -32,33 +32,21 @@ hero:
<style> <style>
:root { :root {
--vp-home-hero-name-color: transparent; --vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #4565d8 40%, #41d1ff);
--vp-home-hero-image-background-image: linear-gradient(-60deg, #bd34fe 40%, #47caff 60%); --vp-home-hero-image-background-image: linear-gradient(-60deg, #41d1ff 40%, #0fffc1);
--vp-home-hero-image-filter: blur(40px);
} }
.image-bg { .image-bg {
position: absolute;
content: "";
top: 5vw;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.75); transform: scale(0.75);
-webkit-filter: blur(5vw); -webkit-filter: blur(5vw);
-moz-filter: blur(5vw); -moz-filter: blur(5vw);
-ms-filter: blur(5vw); -ms-filter: blur(5vw);
filter: blur(5vw); filter: blur(5vw);
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size: 200% 200%; background-size: 200% 200%;
animation: animateGlow 10s ease infinite; animation: animateGlow 10s ease infinite;
} }
@keyframes animateGlow { @keyframes animateGlow {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;