@keyframes zidan {
0% {
color: red;
}
100% {
transform: rotate(180deg);
color: blue;
}
}
div {
overflow: hidden;
position: relative;
width: 100px;
height: 25px;
margin: 200px auto;
border: 1px solid black;
border-radius: 40% 100% 100% 40%;
background: linear-gradient(to right, rgb(172, 83, 0), #c0c0c0);
box-shadow: 2px 9px 2px 1px;
transition: all 2s ease;
cursor: pointer;
animation-name: zidan;
animation-duration: 10s;
animation-timing-function: linear;
}
div::after {
content: "";
position: absolute;
top: 0px;
left: 5px;
width: 100px;
height: 6px;
opacity: 0.3;
background: linear-gradient(to bottom, rgb(255, 253, 107), white, white);
border-radius: 100% 100% 100% 100%;
transform: rotate(2deg);
}
