mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
106 lines
2 KiB
HTML
106 lines
2 KiB
HTML
<div class="container">
|
|
<div class="square">
|
|
<span style="--i:0;"></span>
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
<div class="square">
|
|
<span style="--i:0;"></span>
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
<div class="square">
|
|
<span style="--i:0;"></span>
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by codebykay101 - Tags: animation, neon, css, effects */
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.container .square {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.container .square:nth-child(2) {
|
|
transform: translate(-25%, -25%) rotateX(180deg);
|
|
filter: hue-rotate(60deg);
|
|
}
|
|
|
|
.container .square:nth-child(3) {
|
|
transform: translate(25%, 25%) rotate(180deg);
|
|
filter: hue-rotate(180deg);
|
|
}
|
|
|
|
.container .square::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #0f0;
|
|
box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01;
|
|
animation: animateSquare 4s linear infinite;
|
|
}
|
|
|
|
@keyframes animateSquare {
|
|
0% {
|
|
transform: translate(2px,2px);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(178px,2px);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(178px,178px);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(2px,178px);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(2px,2px);
|
|
}
|
|
}
|
|
|
|
.container .square span {
|
|
position: absolute;
|
|
inset: 10px;
|
|
overflow: hidden;
|
|
transform: rotate(calc(90deg * var(--i)));
|
|
}
|
|
|
|
.container .square span::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #0f0;
|
|
transform: translateX(-100%);
|
|
animation: animate 4s linear infinite;
|
|
animation-delay: calc(1s * var(--i));
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
50%,100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style>
|