mirzaev/css-gradient-floating
mirzaev
/
css-gradient-floating
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no bitches?????????????????

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2022-12-02 10:28:20 +10:00
parent 320b7db3c4
commit 004a39021c
1 changed files with 102 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
gradient.css
View File

@ -5,91 +5,72 @@
} }
@keyframes red { @keyframes red {
from {
left: -250%;
top: -300%;
}
25% { 25% {
left: -240%; left: -240%;
top: -130%; top : -130%;
} }
50% { 50% {
left: -100%; left: -100%;
top: -120%; top : -120%;
} }
75% { 75% {
left: -160%; left: -160%;
top: -230%; top : -230%;
} }
to { 100% {
left: -250%; left: -250%;
top: -300%; top : -300%;
} }
} }
@keyframes blue { @keyframes blue {
from {
left: -280%;
top: -80%;
}
25% { 25% {
left: -180%; left: -180%;
top: -100%; top : -100%;
} }
50% { 50% {
left: -120%; left: -120%;
top: -250%; top : -250%;
} }
75% { 75% {
left: -250%; left: -250%;
top: -300%; top : -300%;
} }
to { 100% {
left: -280%; left: -280%;
top: -80%; top : -80%;
} }
} }
@keyframes green { @keyframes green {
from {
left: -180%;
top: -100%;
}
25% { 25% {
left: -120%; left: -120%;
top: -250%; top : -250%;
} }
50% { 50% {
left: -250%; left: -250%;
top: -300%; top : -300%;
} }
75% { 75% {
left: -280%; left: -280%;
top: -80%; top : -80%;
} }
to { 100% {
left: -180%; left: -180%;
top: -100%; top : -100%;
} }
} }
@keyframes background { @keyframes wrap-background {
from {
background-color: #ff5c5c;
}
25% { 25% {
background-color: #9395ff; background-color: #9395ff;
} }
@ -102,100 +83,58 @@
background-color: #534eff; background-color: #534eff;
} }
to { 100% {
background-color: #ff5c5c; background-color: #ff5c5c;
} }
} }
body { :is(div, section).gradient {
height: 100vh; position : relative;
margin: unset; overflow : hidden;
background: #222; animation-duration : 30s;
} animation-name : wrap-background;
main {
height: 100%;
display: flex;
flex-direction: column;
}
#authentication {
width: 40vw;
margin: auto auto;
}
#authentication > h1 {
margin: unset;
color: #fff;
}
#authentication > h1.header {
width: 100%;
height: 60px;
padding-bottom: 0.3ex;
display: flex;
justify-content: center;
align-items: center;
}
#authentication > h1.header.gradient {
z-index: -2000;
position: relative;
overflow: hidden;
animation-duration: 65s;
animation-name: background;
animation-iteration-count: infinite; animation-iteration-count: infinite;
background-repeat: no-repeat; background-repeat : no-repeat;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
background-color : #ff5c5c;
} }
#authentication > h1.header.gradient > div { :is(div, section).gradient>div:not(.gradient) {
z-index: -1000; z-index : -1000;
width: 500%; width : 500%;
height: 500%; height : 500%;
position: absolute; position : absolute;
pointer-events: none; pointer-events : none;
animation-duration: 25s; filter : blur(200px);
background-repeat: no-repeat; animation-duration : 12s;
background-repeat : no-repeat;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
#authentication > h1.header.gradient > div.red { :is(div, section).gradient>div.red {
left : -250%;
top : -300%;
animation-name: red; animation-name: red;
background-image: radial-gradient( background-image: radial-gradient(circle,
circle,
rgba(255, 25, 25, 1) 0%, rgba(255, 25, 25, 1) 0%,
rgba(0, 0, 0, 0) 35% rgba(0, 0, 0, 0) 35%);
);
} }
#authentication > h1.header.gradient > div.blue { :is(div, section).gradient>div.blue {
left : -280%;
top : -80%;
animation-name: blue; animation-name: blue;
background-image: radial-gradient( background-image: radial-gradient(circle,
circle,
rgba(25, 25, 255, 0.6) 0%, rgba(25, 25, 255, 0.6) 0%,
rgba(0, 0, 0, 0) 35% rgba(0, 0, 0, 0) 35%);
);
} }
#authentication > h1.header.gradient > div.green { :is(div, section).gradient>div.green {
left : -180%;
top : -100%;
animation-name: green; animation-name: green;
background-image: radial-gradient( background-image: radial-gradient(circle,
circle,
rgba(25, 255, 25, 1) 0%, rgba(25, 255, 25, 1) 0%,
rgba(0, 0, 0, 0) 35% rgba(0, 0, 0, 0) 35%);
);
}
#authentication > div.content {
height: 300px;
background: #1c1b1b;
}
@media (max-height: 400px) {
#authentication {
width: 80vw;
margin: 25vh auto;
}
} }