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

feat: add animation

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

33
docs/index.md
View File

@ -38,6 +38,39 @@ hero:
--vp-home-hero-image-filter: blur(40px);
}
.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);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size: 200% 200%;
animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);

33
docs/zh/index.md
View File

@ -38,6 +38,39 @@ hero:
--vp-home-hero-image-filter: blur(40px);
}
.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);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size: 200% 200%;
animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);