CSS-live.ru

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

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

WebGL-слайдер с искажением

Технологии: CSS-анимация, Three.js, jQuery.js, Tweenmax.js.
Автор: Аш Торнтон (@ashthornton)

WebGL-слайдер с искажением Посмотреть живой пример


Анимация кнопок выравнивания

Технологии: CSS, jQuery.js, Tweenmax.js.
Автор: Валерий Аликин (@AlikinVV)

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


Интересный дизайн галереи

Технологии: CSS, CSS-трансформации, Photoswipe.js, lazysizes.js.
Автор: Михал Нивитала (@mican)

Интересный дизайн галереи Посмотреть живой пример


Create.js + Oreo

Технологии: canvas, create.js.
Автор: Себастьян ДеРосси (@derossi_s)

Create.js + Oreo Посмотреть живой пример


Значки Мстителей

Технологии: CSS, clip-path, JS.
Автор: Jhey (@jh3y)

Значки Мстителей Посмотреть живой пример


Хронологическая лента

Технологии: SVG, CSS, JS.
Автор: Стив Гарднер (@steveg3003)

Лента хронологии Посмотреть живой пример


Перчатка Бесконечности

Технологии: CSS, CSS-градиенты, CSS-анимация, CSS-трансформации.
Автор: Джон Кантнер (@jkantner)

Перчатка Бесконечности Посмотреть живой пример


Анимация меню социальных сетей

Технологии: CSS, CSS-трансформации, JS.
Автор: Хосе Росарио (@JoseRosario)

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


Анимация с лосем

Технологии: CSS, CSS-анимация.
Автор: hankuro (@hankuro)

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


Анимированный узор на CSS-гридах

Технологии: CSS, CSS-гриды, CSS-переменные.
Автор: Мириам Сюзанна (@mirisuzanne)

Анимированный узор на CSS-гридах Посмотреть живой пример


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

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

3 комментария

  1.  
    Анимация меню социальных сетей

    Я не понимаю от куда он берет эти иконки, есть ссылка

    https://fonts.googleapis.com/icon?family=Material+Icons

    но перехожу там ссылка на стили, максимум что получается скачать это формат woff2  которые я не понимаю как открыть и  редактировать

Оставить комментарий

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

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