mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
215 lines
16 KiB
HTML
215 lines
16 KiB
HTML
<div class="one-div"></div>
|
|
<style>
|
|
/* From Uiverse.io by Galahhad - Tags: card, gold, ticket */
|
|
.one-div {
|
|
--circle-color: #212121;
|
|
width: 300px;
|
|
height: 150px;
|
|
position: relative;
|
|
}
|
|
|
|
.one-div::before {
|
|
content: "Golden Ticket";
|
|
color: transparent;
|
|
text-shadow: -55px 0 #2E2205;
|
|
text-transform: uppercase;
|
|
font-family: "Anton", Impact, sans-serif;
|
|
font-size: 1.6rem;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
-o-radial-gradient(right bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
|
|
-o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
|
|
background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
|
|
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
|
|
background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
|
|
background-position: 8px -6px, 8px 125px, 198px 3px, 198px 20px, 198px 37px, 198px 54px, 198px 71px, 198px 88px, 198px 105px, 235px 15px, 235px 20px, 235px 27px, 235px 31px, 235px 39px, 235px 43px, 235px 50px, 235px 54px, 235px 58px, 235px 65px, 235px 69px, 235px 76px, 235px 80px, 235px 87px, 235px 91px, 235px 95px, 235px 103px, 235px 106px, 50px -90px, 50px 90px, 200px, -200px, 0, 0;
|
|
background-repeat: no-repeat;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
-webkit-transition: .8s;
|
|
-o-transition: .8s;
|
|
transition: .8s;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.one-div::after {
|
|
content: "This golden ticket\A ensures admittance";
|
|
white-space: pre;
|
|
color: transparent;
|
|
text-shadow: 55px 0 #2E2205;
|
|
font-family: "Anton", Impact, sans-serif;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
-o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
-o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
-o-radial-gradient(left bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
|
|
-o-radial-gradient(right top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
|
|
background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
|
|
radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
|
|
radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
|
|
radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
|
|
radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
|
|
background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
|
|
background-position: 126px -6px, 126px 125px, 98px 3px, 98px 20px, 98px 37px, 98px 54px, 98px 71px, 98px 88px, 98px 105px, 20px 15px, 20px 20px, 20px 27px, 20px 31px, 20px 39px, 20px 43px, 20px 50px, 20px 54px, 20px 58px, 20px 65px, 20px 69px, 20px 76px, 20px 80px, 20px 87px, 20px 91px, 20px 95px, 20px 103px, 20px 106px, -50px -90px, -50px 90px, 200px, -200px, 0, 0;
|
|
background-repeat: no-repeat;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
-webkit-transition: .8s;
|
|
-o-transition: .8s;
|
|
transition: .8s;
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.one-div:hover::before {
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.one-div:hover::after {
|
|
-webkit-transform: rotateY(0);
|
|
transform: rotateY(0);
|
|
}
|
|
</style>
|