✅ Как создать анимацию появления текста?
Keyframes — это «ключевые кадры», на основе которых создается анимация для веб-страниц. Они показывают, как будет выглядеть анимированный элемент в конкретный момент времени.
☑️ С помощью этого можно создавать невероятные анимации. Явный пример использования keyframes, это анимация появления текста. Она создана лишь с помощью 25 строк SCSS кода и 1 строки в HTML. ⬇️
@code_ready | #обучение #scss
Keyframes — это «ключевые кадры», на основе которых создается анимация для веб-страниц. Они показывают, как будет выглядеть анимированный элемент в конкретный момент времени.
☑️ С помощью этого можно создавать невероятные анимации. Явный пример использования keyframes, это анимация появления текста. Она создана лишь с помощью 25 строк SCSS кода и 1 строки в HTML. ⬇️
<h1>LUMINANCE</h1>
body {
height: 100%;
background: #333641;
}
h1 {
font-weight: 400;
background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 100px;
text-align: center;
font-family: "Source Sans Pro", sans-serif;
animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
@keyframes reveal {
80% { letter-spacing: 8px;}
100% { background-size: 200% 200%;}
}
@keyframes glow {
40% { text-shadow: 0 0 8px #fff;}
}
}@code_ready | #обучение #scss