✅ Как сделать анимированную 3D тень?
Существуют различные варианты hover эффектов, но не все помещаются буквально в пару строк кода. Данный эффект создан с помощью html атрибута data-text, css псевдокласса hover и псевдоэлементов аfter, before.
☑️ Атрибут data-text добавляют для создания второй тени, после остается добавить css стили и создать саму тень с помощью after и before. А под конец анимировать движение тени при нажатии на текст.
Оставляем для вас HTML & SCSS код, для создания крутого hover эффекта: ⤵️
@code_ready | #обучение #html #scss
Существуют различные варианты hover эффектов, но не все помещаются буквально в пару строк кода. Данный эффект создан с помощью html атрибута data-text, css псевдокласса hover и псевдоэлементов аfter, before.
☑️ Атрибут data-text добавляют для создания второй тени, после остается добавить css стили и создать саму тень с помощью after и before. А под конец анимировать движение тени при нажатии на текст.
Оставляем для вас HTML & SCSS код, для создания крутого hover эффекта: ⤵️
<h1 data-text="ABC"></h1>
h1{
position: relative;
font-size: 10em;
letter-spacing:10px;
font-family: sans-serif;
display:table;
margin:40px auto;
cursor:pointer;
transition:.6s;
&:hover {
transform:translate(-10px,-10px);
}
&::before, &::after {
content:attr(data-text);
transition:.6s;
}
&::before {
position: absolute;
text-shadow:
0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
-webkit-mask:repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.5) 0 6px);
mask:repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.5) 0 6px);
}
&:hover::before {
text-shadow:
1px 1px, 2px 2px, 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px, 9px 9px, 10px 10px;
}
}@code_ready | #обучение #html #scss