mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
59 lines
No EOL
1 KiB
HTML
59 lines
No EOL
1 KiB
HTML
<div class="glitch" data-text="Loading ...">Loading ...</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by youngjid - Tags: loader, dark, glitch, text animation, css effect, glitch Effect */
|
|
.glitch {
|
|
position: relative;
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
letter-spacing: 3px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.glitch:before,
|
|
.glitch:after {
|
|
display: block;
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.glitch:before {
|
|
animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
|
|
color: #00ffff;
|
|
z-index: -1;
|
|
}
|
|
|
|
.glitch:after {
|
|
animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both
|
|
infinite;
|
|
color: #ff00ff;
|
|
z-index: -2;
|
|
}
|
|
|
|
@keyframes glitch-it {
|
|
0% {
|
|
transform: translate(0);
|
|
}
|
|
20% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
40% {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
60% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
80% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
to {
|
|
transform: translate(0);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|