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

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

Солнечная система 3D

Технологии: CSS, JS.
Автор: Джулиан Гарнье (@juliangarnier)

Солнечная система 3D Посмотреть живой пример


Освещение участка изображения

Круглый освещенный участок следует за курсором. Предусмотрено несколько фильтров.
Технологии: CSS переменные, Mix Blend Mode и JS.
Автор: Дэн Уилсон (@danwilson)

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


Подвижное изображение

Интерактивная картинка на canvas. Можно управлять наведением курсора, а также перекинуть на холст свою картинку мышкой.
Технологии: canvas, JS.
Автор: Джей Скотт Смит (@jscottsmith)

Подвижное изображение Посмотреть живой пример


Мультяшный персонаж Снотомакс

Технологии: CSS трансформации, анимация.
Автор: Беатрис Агустин (@abeatrize)

Мульташный персонаж Снотомакс Посмотреть живой пример


Изображение из трех слоев

Движением ползунка идет переход между слоями.
Технологии: CSS псевдоклассы before и after, JS.
Автор: Huw (@nosurprisethere)

Изображение из трех слоев Посмотреть живой пример


Вид через грязное стекло

Технологии: CSS трансформации, анимация.
Автор: Крис Смит (@chris22smith)

Вид через грязное стекло Посмотреть живой пример


Анимированный пейзаж с закатом

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

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


Анимация «Бесконечная прогулка»

Технологии: SVG, JS.
Автор: Йорис ван Раай (@jorisvanr)

Анимация «Бесконечная прогулка» Посмотреть живой пример


Треугольники: анимация перехода из кролика в оленя

Технологии: SVG, JS.
Автор: Микаэль Айналем (@ainalem)

Треугольники: переход из кролика в оленя Посмотреть живой пример


Эффект при наведении для ссылок

Цветная подложка для ссылки следует за курсором.
Технологии: CSS, JS.
Автор: Кэтрин Като (@kathykato)

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


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

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

    Грязное стекло какое-то странное, а вот трёхслойная картинка отличная и идеей и реализацией

    1. Александр

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

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

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

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

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