CSS-live.ru

Еженедельная подборка красивых эффектов на 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. Видимо, автор демки недавно обновил ее, добавив такой кусочек кода:

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

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

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

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