mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
104 lines
2.2 KiB
HTML
104 lines
2.2 KiB
HTML
<div class="container">
|
|
<svg class="svg-icon" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
|
|
<path d="M62.11,53.93c22.582-3.125,22.304-23.471,18.152-29.929-4.166-6.444-10.36-2.153-10.36-2.153v-4.166H30.099v4.166s-6.194-4.291-10.36,2.153c-4.152,6.458-4.43,26.804,18.152,29.929l5.236,7.777v8.249s-.944,4.597-4.833,4.986c-3.903,.389-7.791,4.028-7.791,7.374h38.997c0-3.347-3.889-6.986-7.791-7.374-3.889-.389-4.833-4.986-4.833-4.986v-8.249l5.236-7.777Zm7.388-24.818s2.833-3.097,5.111-1.347c2.292,1.75,2.292,15.86-8.999,18.138l3.889-16.791Zm-44.108-1.347c2.278-1.75,5.111,1.347,5.111,1.347l3.889,16.791c-11.291-2.278-11.291-16.388-8.999-18.138Z">
|
|
</path>
|
|
</svg>
|
|
<div class="container__star">
|
|
|
|
<div class="star-eight"></div>
|
|
</div>
|
|
|
|
<div></div></div>
|
|
<style>
|
|
/* From Uiverse.io by Javierrocadev - Tags: card, star, rotate, hover effect, trophy, winner */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 5em;
|
|
font-weight: 900;
|
|
color: #e10600;
|
|
position: relative;
|
|
transition: all 1s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.container__star {
|
|
transition: all .7s ease-in-out;
|
|
}
|
|
|
|
.first {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50px;
|
|
transition: all .7s ease-in-out;
|
|
}
|
|
|
|
.svg-icon {
|
|
position: absolute;
|
|
fill: #e94822;
|
|
z-index: 1;
|
|
}
|
|
|
|
.star-eight {
|
|
background: #efd510;
|
|
width: 150px;
|
|
height: 150px;
|
|
position: relative;
|
|
text-align: center;
|
|
animation: rot 3s infinite;
|
|
}
|
|
|
|
.star-eight::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 150px;
|
|
width: 150px;
|
|
background: #efd510;
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.container:hover .container__star {
|
|
transform: rotateX(70deg) translateY(250px);
|
|
box-shadow: 0px 0px 120px -100px #e4e727;
|
|
}
|
|
|
|
.container:hover .svg-icon {
|
|
animation: grow 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rot {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(340deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
75% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
}
|
|
</style>
|