mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-04 10:19:24 +02:00
90 lines
No EOL
1.8 KiB
PHP
90 lines
No EOL
1.8 KiB
PHP
<style>
|
|
.hero {
|
|
background: radial-gradient(#AAA, #333);
|
|
position: fixed;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
font-family: "Montserrat", sans-serif;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
.cube {
|
|
position: absolute;
|
|
top: 80vh;
|
|
left: 45vw;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: solid 1px #333;
|
|
transform-origin: top left;
|
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
|
-webkit-animation: cube 12s ease-in forwards infinite;
|
|
animation: cube 12s ease-in forwards infinite;
|
|
}
|
|
.cube:nth-child(2n) {
|
|
border-color: #AAA;
|
|
}
|
|
.cube:nth-child(2) {
|
|
-webkit-animation-delay: 2s;
|
|
animation-delay: 2s;
|
|
left: 25vw;
|
|
top: 40vh;
|
|
}
|
|
.cube:nth-child(3) {
|
|
-webkit-animation-delay: 4s;
|
|
animation-delay: 4s;
|
|
left: 75vw;
|
|
top: 50vh;
|
|
}
|
|
.cube:nth-child(4) {
|
|
-webkit-animation-delay: 6s;
|
|
animation-delay: 6s;
|
|
left: 90vw;
|
|
top: 10vh;
|
|
}
|
|
.cube:nth-child(5) {
|
|
-webkit-animation-delay: 8s;
|
|
animation-delay: 8s;
|
|
left: 10vw;
|
|
top: 85vh;
|
|
}
|
|
.cube:nth-child(6) {
|
|
-webkit-animation-delay: 10s;
|
|
animation-delay: 10s;
|
|
left: 50vw;
|
|
top: 10vh;
|
|
}
|
|
|
|
@-webkit-keyframes cube {
|
|
from {
|
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(20) rotate(960deg) translate(-50%, -50%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes cube {
|
|
from {
|
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(20) rotate(960deg) translate(-50%, -50%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="hero">
|
|
<div class="cube"></div>
|
|
<div class="cube"></div>
|
|
<div class="cube"></div>
|
|
<div class="cube"></div>
|
|
<div class="cube"></div>
|
|
<div class="cube"></div>
|
|
</div> |