✅ Как сделать Color Swap?
Color Swap- эффектный способ изменить любой цвет текста с помощью анимированного ползунка. Весь код исполнен на CSS, в основном для создания используется анимация keyframes и псевдокласс before.
Ниже оставляем для вас код эффектного замена цвета текста на чистом CSS: ⤵️
Color Swap- эффектный способ изменить любой цвет текста с помощью анимированного ползунка. Весь код исполнен на CSS, в основном для создания используется анимация keyframes и псевдокласс before.
Ниже оставляем для вас код эффектного замена цвета текста на чистом CSS: ⤵️
div {
font-size: 80px;
font-weight: 700;
position: relative;
color: #262626;
padding: 20px 50px;
font-family: sans-serif;
}
div:before {
background: #262626;
color: white;
content: 'CODEPEN';
position: absolute;
top: 0;
left: 0;
padding: 20px 50px;
-webkit-clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
animation: slide 4s 1s linear infinite;
}
@keyframes slide {
50% {
-webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%);
}
}
#обучение #css