پیشنمایش زنده
کد HTML
<label class="container">
<input checked="checked" type="checkbox">
<svg viewBox="0 0 320 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="chevron-right"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg>
</label>
کد CSS
/*------ Settings ------*/
.container {
--color: #a5a5b0;
--size: 30px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
font-size: var(--size);
user-select: none;
fill: var(--color);
}
.container .chevron-right {
position: absolute;
animation: keyframes-return .5s backwards;
}
/* ------ On check event ------ */
.container input:checked ~ .chevron-right {
animation: keyframes-rotate .5s backwards;
transform: rotate(180deg);
}
/* ------ Hide the default checkbox ------ */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* ------ Animation ------ */
@keyframes keyframes-rotate {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(180deg);
}
}
@keyframes keyframes-return {
0% {
transform: rotate(180deg);
opacity: 0;
}
100% {
transform: rotate(0deg);
}
}