mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
105 lines
No EOL
2 KiB
HTML
105 lines
No EOL
2 KiB
HTML
<div class="one-div"></div>
|
|
<style>
|
|
/* From Uiverse.io by roroland - Tags: 3d, pink, button, card, animated */
|
|
.one-div {
|
|
--color1: #db41a5;
|
|
--color2: pink;
|
|
--color3: #fff;
|
|
--color4: #ffaae2;
|
|
--time: 5;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1em;
|
|
width: auto;
|
|
height: 100%;
|
|
position: relative;
|
|
transition: all 1s ease-out;
|
|
transform: perspective(400px);
|
|
transform-style: preserve-3d;
|
|
z-index: 0;
|
|
}
|
|
|
|
.one-div:hover {
|
|
cursor: pointer;
|
|
filter: drop-shadow(0px 0px 100px var(--color2));
|
|
scale: 1.2;
|
|
}
|
|
|
|
.one-div:hover::after {
|
|
scale: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.one-div:hover::before {
|
|
color: var(--color4);
|
|
box-shadow: 0px 0px 20px 5px rgba(0,0,0, .5), 0px 3px 50px rgba(0,0,0, .15), inset 0 0 1px 1px #000;
|
|
text-shadow: 0 1px 5px #000;
|
|
}
|
|
|
|
.one-div:active {
|
|
transition: all .1s ease-out;
|
|
scale: .99;
|
|
}
|
|
|
|
.one-div:active::before {
|
|
transition: all .1s ease-out;
|
|
color: white;
|
|
}
|
|
|
|
.one-div::after,
|
|
.one-div::before {
|
|
padding: 1em;
|
|
grid-column: 1/-1;
|
|
grid-row: 1 / 1;
|
|
position: relative;
|
|
transition: all 1s ease-out .3s;
|
|
}
|
|
|
|
.one-div::before {
|
|
animation: fade calc(var(--time) * 1s) ease-out infinite calc(var(--time) * .5s);
|
|
content: 'Single div button';
|
|
border-radius: 4px;
|
|
background-image: linear-gradient(to bottom, var(--color1) 30%, var(--color2) 95%, var(--color3) 99%);
|
|
}
|
|
|
|
.one-div::after {
|
|
animation: rotate calc(var(--time) * 1s) ease-out infinite;
|
|
display: block;
|
|
width: calc(100% - 2rem);
|
|
outline-color: var(--color4);
|
|
outline-width: .5em;
|
|
outline-offset: .9em;
|
|
outline-style: solid;
|
|
content: '';
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
rotate: x -90deg;
|
|
}
|
|
|
|
0%, 50% {
|
|
filter: blur(0px) drop-shadow(0px 0px 60px var(--color3)) opacity(100%);
|
|
}
|
|
|
|
100% {
|
|
rotate: x 90deg;
|
|
filter: blur(4px) drop-shadow(0px 0px 30px var(--color2)) opacity(80%);
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
</style>
|
|
|