Еженедельная подборка красивых эффектов на CSS/SVG/JS #53

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с велосипедом

Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)

Анимация с велосипедом Посмотреть живой пример


Креативный череп на CSS

Автора вдохновил Король ночи из «Игры престолов» и Калавера (сахарные черепа, лакомство ко Дню мертвых в Мексике).
Технологии: CSS трансформации и анимация.
Автор: Чхави Ханделвал (@ChhaviKhandelwal)

Креативный череп на CSS Посмотреть живой пример


Симулятор помех

Технологии: CSS, canvas, JS.
Автор: Габриэль Кирилл (@gcyrillo)

Симулятор помех Посмотреть живой пример


Анимация с полосами на стене — цвета CMYK

Технологии: CSS трансформации и анимация.
Автор: Дэнни Винтер (@dannievinther)

Косяк рыб, обтекающий текст Посмотреть живой пример


Градиентный фон выделения текста

Цвет фона у выделенного текста плавно меняется. Это лучше видно при прокрутке страницы — цвет ниже отличается сильней.
Технологии: HTML (Markdown), CSS.
Автор: Томми Ходжинс (@tomhodgins)

Эффект калейдоскопа при наведении, CSS Посмотреть живой пример


Имитация работ художника Пита Мондриана

Технологии: CSS grid.
Автор: Николас Раубе (@nicolasraube)

Имитация работ художника Пита Мондриана Посмотреть живой пример


Анимация с бумажной птичкой на CSS

Технологии: HTML (pug), CSS трансформации и анимация.
Автор: Юсуке Накая (@YusukeNakaya)

Анимация с бумажной птичкой Посмотреть живой пример


Простая, но эффектная анимация смены слов на CSS

Технологии: CSS анимация.
Автор: Нурей Йемон (@yemon)

Простая, но эффектная анимация смены слов на CSS Посмотреть живой пример


Анимация с машиной

Двигая рычажок вправо и влево, можно менять скорость
Технологии: HTML, SVG, JS.
Автор: Йорис ван Раай (@jorisvanr)

Варианты анимации букв Посмотреть живой пример


Глаза в стиле аниме на CSS

Глаза Канеки Кена из аниме «Tokyo Ghoul».
Технологии: CSS.
Автор: Бил Бенхаму (@TheBilTheory)

Глаза в стиле аниме на CSS Посмотреть живой пример


Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:

5 Комментарии
  1. Denai

    А что мешает бумажной птичке работать под firefox?

    1. SelenIT

      Судя по всему, filter: drop-shadow(...); для #sky. Другой вопрос, почему оно ей мешает…

    2. Ярослав

      У меня все работает. Сижу с Firefox.

      1. SelenIT

        Видимо, автор демки недавно обновил ее, добавив такой кусочек кода:

        // filter+transfrom-style do not working on Firefox...
        @-moz-document url-prefix() {
        filter: none;
        }

        1. Светлана Павлова (Автор записи)

          Да, проблема в ‘filter’ + ‘transform-style’ в Firefox. Автор сказал, что добавил этот временный хак и будет думать, как исправить аккуратнее.

Добавить комментарий для SelenIT Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.