Yet another glowing card
Created
December 17, 2022 02:45
-
-
Save OsvaldoRino/f0b2a1c5c2f1ab90ebb457f0afcfa30d to your computer and use it in GitHub Desktop.
Magic Card
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card"> | |
Magic Card | |
</div> | |
<a href="https://mythrillfiction.com/" target="_blank">Mythrill</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@property --rotate { | |
syntax: "<angle>"; | |
initial-value: 132deg; | |
inherits: false; | |
} | |
:root { | |
--card-height: 65vh; | |
--card-width: calc(var(--card-height) / 1.5); | |
} | |
body { | |
min-height: 100vh; | |
background: #212534; | |
display: flex; | |
align-items: center; | |
flex-direction: column; | |
padding-top: 2rem; | |
padding-bottom: 2rem; | |
box-sizing: border-box; | |
} | |
.card { | |
background: #191c29; | |
width: var(--card-width); | |
height: var(--card-height); | |
padding: 3px; | |
position: relative; | |
border-radius: 6px; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
display: flex; | |
font-size: 1.5em; | |
color: rgb(88 199 250 / 0%); | |
cursor: pointer; | |
font-family: cursive; | |
} | |
.card:hover { | |
color: rgb(88 199 250 / 100%); | |
transition: color 1s; | |
} | |
.card:hover:before, .card:hover:after { | |
animation: none; | |
opacity: 0; | |
} | |
.card::before { | |
content: ""; | |
width: 104%; | |
height: 102%; | |
border-radius: 8px; | |
background-image: linear-gradient( | |
var(--rotate) | |
, #5ddcff, #3c67e3 43%, #4e00c2); | |
position: absolute; | |
z-index: -1; | |
top: -1%; | |
left: -2%; | |
animation: spin 2.5s linear infinite; | |
} | |
.card::after { | |
position: absolute; | |
content: ""; | |
top: calc(var(--card-height) / 6); | |
left: 0; | |
right: 0; | |
z-index: -1; | |
height: 100%; | |
width: 100%; | |
margin: 0 auto; | |
transform: scale(0.8); | |
filter: blur(calc(var(--card-height) / 6)); | |
background-image: linear-gradient( | |
var(--rotate) | |
, #5ddcff, #3c67e3 43%, #4e00c2); | |
opacity: 1; | |
transition: opacity .5s; | |
animation: spin 2.5s linear infinite; | |
} | |
@keyframes spin { | |
0% { | |
--rotate: 0deg; | |
} | |
100% { | |
--rotate: 360deg; | |
} | |
} | |
a { | |
color: #212534; | |
text-decoration: none; | |
font-family: sans-serif; | |
font-weight: bold; | |
margin-top: 2rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment