پیشنمایش زنده
کد 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>
کد CSS
.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);
}
}