CSS-анимации: введение и примеры

Самые основные анимационные эффекты в CSS могут быть достигнуты с помощью таких свойств, как transform и transition . Однако рабочий проект CSS Animations Level 1 обеспечивает более сложную среду, используя свойства animation и @keyframes для достижения эффектов вечной анимации. Лучше всего это понять на конкретном примере.

Указание правил анимации с помощью @keyframes

Правило @keyframes используется для указания поведения анимации, которое мы хотим применить к идентификатору анимации в макете страницы. Идентификатор указывается через animation-name или с помощью имени- animation: name; стенография.

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

В этом контексте приведенный выше пример изменит background-color с белого на черный в течение анимации. from относится к началу (0%), а to относится к концу (100%). Таким образом, правило также можно переписать с процентными значениями.

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

Само по себе это ничего не даст, если мы не укажем элемент, который хотим анимировать. Кроме того, вы также должны указать animation-duration поскольку значение по умолчанию равно 0.

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

Затем мы можем вызвать наш контейнер с помощью div, и результат будет таким:

Как правило, большинство анимаций CSS, написанных на чистом CSS, используют стенограмму, потому что это экономит написание нескольких строк логики анимации. Таким образом, вот ссылка на значения свойств animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

дальнейшее чтение

Если вы хотите узнать больше об анимациях CSS, вот мои рекомендуемые ресурсы:

• Справочник по CSS Codrops — это обширный справочник, написанный и организованный Сарой Суейдан (@SaraSoueidan) и содержащий подробные примеры того, как работают определенные свойства CSS.
• MDN CSS Animations — подробное введение в CSS-анимации в стиле документации на странице веб-документов MDN.
• Введение в cube-bezier() — подробная статья, написанная Темани Афиф (@ChallengesCss) для CSS-Tricks об использовании свойства cube cubic-bezier() для создания продвинутой CSS-анимации.

Примеры CSS-анимации

Лучший способ научиться чему-либо — это использовать примеры. Следующий раздел полностью посвящен различным эффектам, достигаемым с помощью свойств анимации CSS.

Последняя вещь! Многие из приведенных ниже примеров анимации имеют довольно много кода, связанного с ними, поэтому я добавил в эту статью переполнение максимальной высоты , чтобы включить полосу прокрутки. Вы также можете навести курсор на каждый фрагмент кода и скопировать его в буфер обмена, чтобы импортировать его в редактор кода.

Волна

Волновая анимация создается путем сначала рисования пути SVG для волнового узора, а затем присвоения ему идентификатора. После этого мы указываем четыре класса nth-child с пользовательскими переменными animation-delay и animation-duration . Каждая переменная представляет собой отдельную волну внутри анимации, и каждая волна может иметь независимый стиль.

Преимущество определения шаблона с помощью SVG заключается в том, что код можно легко использовать повторно.

Если вы посмотрите на путь, который мы нарисовали, мы указываем четыре разных слоя для волны (используя пользовательскую ось), а затем ссылаемся на идентификатор #wave-pattern , который мы установили для начального пути. Здесь вы также можете изменить цвет каждой волны.

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

Загрузка текста

Этот эффект загрузки относительно легко реализовать, потому что он использует лишь несколько практических свойств анимации. Во-первых, вы хотите указать значение content: attr() , которое вы затем примените к текстовому элементу, который хотите анимировать. После этого вы указываете саму анимацию, в нашем случае это animation: loading 5s linear infinite; .

Продолжительность эффекта загрузки можно изменить, изменив свойство 5s. И, наконец, мы используем @keyframes для вызова анимации загрузки и изменения ее ширины с 0% до 100% в течение 5 секунд. Чем выше значение длительности анимации, тем медленнее эффект загрузки.

Конкретными вариантами использования такой анимации являются эффекты перехода при загрузке страницы, а также надежное решение для проектов приложений, когда вы не хотите полагаться на какие-либо библиотеки.

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

Текстовая волна

Одной из первых вещей, которые вы заметите в этой анимации, является ее плавность . Это возможно, потому что мы используем функцию calc() для математического расчета каждого перехода. Поскольку мы пишем анимацию на чистом CSS, нам приходится использовать несколько элементов span для указания каждой последовательной буквы в анимации.

Что касается изменения глубины волны, во-первых, вы можете изменить продолжительность с 3 секунд на меньшее или большее число. Чем выше значение, тем медленнее волновой эффект, и наоборот. И внутри @keyframes вы можете изменить спецификацию -24px, чтобы изменить высоту волны.

Чем выше отрицательное значение, тем более выражен волновой эффект.

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

Импульсный / пульсирующий эффект

Мы начинаем с создания контейнера для круга, к которому мы хотим применить эффект. Это специфично для демонстрации, но вы можете повторно использовать код для любых других элементов на вашей странице. После этого мы создаем класс с именем .circle , который будет служить анимированным эффектом ряби.

В этом классе мы используем два примечательных свойства: opacity: 0.5; и animation: ease-out; . Непрозрачность — это то, что создает иллюзию ряби/пульсации, а плавный переход заставляет эти рябь выходить за пределы исходного контейнера.

Затем мы берем наш класс .circle и применяем к нему свойство nth-of-type() . В этом примере мы используем 3 отдельных круга, которые выходят из исходного контейнера. Внутри вызовов nth-of-type мы применяем animation-delay со значениями -0,5 с;-1 с;-1,5 с. Чем выше отрицательное значение, тем больше времени потребуется для полного рендеринга эффектов.

И, наконец, мы применяем @keyframes к указанной анимации импульса. В этом примере мы используем свойство transform: scale() . Это определяет размер импульсов для каждой анимации. Чем выше значение, тем больше будут исходящие пульсации.

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

Счетчик (числа)

Свойство счетчика легко упустить из виду, потому что обычно вы добавляете числа к определенным элементам вручную. Тем не менее, это удобно, когда вы хотите выполнять углубленные вложенные назначения для пунктов меню или больших страниц документации.

Кроме того, вы можете собрать автоматический счетчик заголовков сообщений в блоге. Например, вы пишете обзор нескольких инструментов. И, что самое приятное, прилавок можно оформить в индивидуальном стиле, что дает вам больше свободы в дизайне.

Но в этой демонстрации мы сосредоточимся на использовании свойства counter для создания автоматического эффекта счетчика. Итак, давайте покопаемся и поймем, как это работает. В этом примере мы сначала создадим контейнер, который будет содержать анимацию счетчика. Вы можете настроить это по своему усмотрению. Затем мы создаем наш .count-numbers , который включает в себя синтаксис анимации, в данном случае это animation: count-numbers 10s linear infinite forwards; .

Чтобы разбить его, мы указываем имя для нашей анимации, мы устанавливаем продолжительность на 10 секунд, и мы устанавливаем направление анимации на нормальное, потому что мы не хотим, чтобы он отсчитывался от 10. Хотя вы можете установить его на чередовать , если вы хотите, чтобы ваш счетчик также считал в обратном направлении.

Двигаясь дальше, мы указываем новый класс с именем .count-numbers::before, который мы используем для имени нашего счетчика, в данном случае, content: counter(count); . Это важно, потому что следующим шагом будет использование имени counter-name для анимации эффекта через @keyframes .

Последним шагом является написание спецификаций анимации для рендеринга. В нашей демонстрации мы считаем от 1 до 10, поэтому мы указываем значение @keyframes от 0% до 100% с шагом 10%. Каждое приращение содержит выражение счетчика приращения, которое также использует наше имя счетчика: counter-increment: count 0; .

Таким образом, при 0% наш шаг устанавливается равным 0, а при 10% он устанавливается равным 1, чтобы спроецировать эффект счетчика.

Также попробуйте изменить content: counter(count); спецификация к содержимому: counter(count, upper-roman); и посмотреть, что происходит!

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

Прыгающий мяч

Начнем с создания контейнера для нашего шара, в данном случае это .ball-container .

Далее мы указываем размер шара и стиль его внешнего вида, используя комбинацию цветов фона и эффектов теней. В нашей демонстрации мы использовали более яркий эффект, но вы можете изменить его по своему усмотрению. И, наконец, мы указываем анимацию, в данном случае мы устанавливаем продолжительность на 5 секунд, а также применяем ease-in-out что означает, что переход имеет медленное начало и конец.

После того, как мяч нарисован и задана анимация, мы можем написать наши правила @keyframes . Чтобы добиться эффекта подпрыгивания, мы используем transform: translatey(); с шагом 50%, то есть от 0% до 50% и до 100%. Акцент сделан на 50%, потому что здесь мы устанавливаем высоту отскока, указав transform: translatey(-50px); - bounce/float будет иметь высоту 50px (относительно контейнера). Чем выше отрицательное число, тем выше будет отскакивать мяч.

Аналогичным образом, указание меньшего числа уменьшит размер возврата.

Последняя часть — это добавление тени, хотя вы также можете удалить ее, так как это не повлияет на саму анимацию мяча. Единственная разница с тенью заключается в том, что мы используем свойство transform: scale() для изменения размера тени в 2D-контексте. Мы устанавливаем значения в соответствии со шкалой эффекта, которого мы хотим достичь.

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

Подбрасывание монеты

Что мне нравится в этой анимации, так это то, что мы можем установить невероятно точный радиус вращения для достижения эффекта, который кажется, что монета действительно подбрасывается. Итак, для начала вам понадобятся 2 изображения (я использую SVG для этой демонстрации, но обычные фотографии работают так же хорошо. Просто убедитесь, что к каждому изображению применен правильный класс) и установите для них значение opacity: 0; . Мы установили его на 0, потому что позже мы используем @keyframes для изменения их непрозрачности, чтобы изображения появлялись в поле зрения в определенных позициях во время анимации.

Класс .image-container используется для указания размеров изображений внутри монеты. Убедитесь, что вы также указали это для реальных изображений, как показано во фрагменте ниже. Далее мы указываем .coin-style который является внешней частью (сама монета). Технически вы можете сделать его прозрачным, но для демонстрации мы сделали его видимым.

Основная концепция класса .coin-style заключается в том, как мы добавляем анимацию, которая в данном случае выглядит следующим образом : .

Интерес представляет спецификация cubic-bezier() , которая дает нам эффект вращающейся кривой для монетного контейнера. Это практически невозможно написать самостоятельно, поэтому я рекомендую использовать любой инструмент-генератор для визуализации желаемого эффекта кривой.

И, наконец, внутри наших @keyframes мы применяем функцию scaleX() для изменения размера внешнего вида монеты по x-axis . Даже самое минимальное изменение предоставленных значений (в этой демонстрации) изменит то, как появляется эффект «переворота».

Я думаю, что приведенная ниже реализация максимально близка к совершенству, но, возможно, вы можете сделать лучше!

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

Вставка

Чтобы заставить эту анимацию работать, мы используем animation: ease-out; в сочетании с отрицательным значением позиции внутри @keyframes . Итак, в этом примере мы указываем 0% {opacity: 0;left: -700px;} что делает наш выдвижной элемент невидимым в начале, но также позиционируется на 700px за пределами контейнера.

После этого мы указываем 100% {opacity: 1;left: 0;} , что к тому времени, когда наша анимация закончится (мы установили ее на 2 секунды), вернет нормальную видимость и вернет наш элемент в его относительное положение.

Интересно отметить, что этот эффект работает во всех направлениях.

Если вы хотите, чтобы эффект слайда появлялся с правой стороны, вам нужно изменить левую:; значения справа:; и наоборот для таких позиций, как верхняя и нижняя. Вы также можете отложить анимацию, настроив время, необходимое для вставки элемента.

Более высокое значение замедлит анимацию.

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

Эффект капли

Прежде всего, что, черт возьми, такое Blob? Как выразился Ян Латчмансингх, «клякса — это аморфная, псевдоорганическая форма, которая обычно используется для визуальной привязки целевых страниц. Обычно он служит маской или фоном для иллюстрации. Около 90% времени Blob заполнен градиентом и находится на самом нижнем слое дизайна». . Это, безусловно, один из наиболее распространенных шаблонов в современном веб-дизайне. Но как нам его оживить?

Мы начинаем с создания контейнера с эффектом блоба, а также указываем 3 отдельных элемента span внутри контейнера. Мы делаем это, потому что на самом деле сами «рисуем» блоб, используя комбинацию свойств border и border-radius.

Чтобы добиться разнообразного эффекта, мы используем nth-child для индивидуального стиля каждого элемента. Если вы хотите поэкспериментировать с этим, не стесняйтесь изменять процентные свойства, чтобы настроить внешний вид капли.

Сама анимация достигается с помощью свойства transform: rotate() внутри спецификации @keyframes . Мы устанавливаем его от 0 до 360 градусов, потому что это дает нам вечный эффект. Наложение цвета выполняется с помощью :hover и позволяет нам установить собственный цвет фона. И, дополнительно, мы также создаем отдельный контейнер внутри самого блоба. Это дает вам возможность стилизовать отдельные части макета страницы, чтобы получить определенный эффект анимации.

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

Текстовый переключатель

Анимационные эффекты обычно предназначены для творческого веб-дизайна. И в этом случае этот эффект переключения текста поможет создать сильное первое впечатление у посетителей вашего сайта. Идеально подходит для ознакомления с заголовком или, если он настроен, может использоваться для демонстрации функций продукта и т. д.

Первое, что мы делаем, это создаем контейнер для фактического эффекта. После этого мы указываем новый класс div, который будет содержать логику анимации. В нашем случае мы используем 8-секундную продолжительность анимации в сочетании с 3 отдельными спецификациями animation-delay .

Задержка используется для определения того, когда конкретное слово появится в представлении после того, как мы добавим нашу логику @keyframes .

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

Подсветка при наведении

Следует признать, что этот конкретный эффект не использует конкретные свойства анимации. Тем не менее, использование функций attr() и var() должно вдохновить вас на дальнейшую настройку этого эффекта.

Если вы посмотрите на спецификацию ul li a::before , то увидите, что мы используем attr() , чтобы указать, к какому элементу мы хотим приписать эффект. Кроме того, мы добавляем переменную с именем –clr , которую вы используете для установки пользовательского цвета для каждого элемента, к которому вы хотите применить эффект наведения.

В этом примере мы также добавили свойство border-right , чтобы указать, какой цвет мы используем для каждого из элементов. Вы можете удалить его, и эффект все равно будет работать.

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }