Разное

Эффекты css: 8 простых, но полезных CSS-эффектов для вашего сайта

30.11.2022

Содержание

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

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

CSS-иллюстрация «Спортсменка»

По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)

Посмотреть живой пример

Имитация экрана

Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью имитации экрана.
Технологии: CSS-функция matrix3d(), CSS-трансформации, iframe.
Автор: Джордж В. Парк (@GeorgePark)

Посмотреть живой пример

Анимация статуса

Кнопки управляют анимацией: «Пассивный», «Ожидает», «Размышляет», «Вводит текст», «Фигачит по клавиатуре».
Технологии: SVG, CSS-трансформации, CSS-анимация, React.js.
Автор: Бард Н. Ховде (@bnhovde)

Посмотреть живой пример

Многоуровневое боковое меню

Меню выдвигается при наведении на одну из иконок слева.

Технологии: CSS, CSS-трансформации, JS, jQuery.js.
Автор: Аарон Авад (@blindpiggy)

Посмотреть живой пример

Медведь на мопеде

Технологии: CSS, Create.js.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

Посмотреть живой пример

Трехмерный мишка

Кликом и удерживанием курсора можно «крутить» мишку.
Технологии: CSS.
Автор: Дэйв ДеСандро (@desandro)

Посмотреть живой пример

Генератор лиц

Лица генерируются заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

Посмотреть живой пример

Бесконечная стопка бумаг

Стопка генерируется заново по клику в любом месте.


Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

Посмотреть живой пример

Хамелеон

Хамелеон меняет свой окрас по клику на листик другого цвета.
Технологии: CSS-переменные, JS, Lottie-web.
Автор: kittons (@airnan)

Посмотреть живой пример

Варианты стилизации кнопок при наведении

Технологии: CSS.
Автор: Параскевас Нтинакис (@perry_nt)

Посмотреть живой пример

Эффекты волны при клике на кнопку

Технологии: CSS-переменные, CSS-трансформации, JS.

Автор: jakob-e (@jakob-e)

Посмотреть живой пример

Меню действий на CSS

Внизу кнопка, по клику на которой появляется меню.
Технологии: CSS.
Автор: Рафаэль Л. Перейра (@rafarlp)

Посмотреть живой пример

Трактор

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Mandax (@mandax)

Посмотреть живой пример

Флажки с текстом на ветру

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.

Автор: Дэн Уилсон (@danwilson)

Посмотреть живой пример

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

P.S. Это тоже может быть интересно:
  • Canvas, CSS, CSS3, HTML, JavaScript, JSS, SVG, анимация

Последние новости

Последние новости

Последние комментарии

Последние комментарии

Поддержите проект

15 потрясающих анимированных эффектов для текста на CSS

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

И для того чтобы это продемонстрировать, представляю Вам подборку из 15 эффектов для текста, которые сделаны только с помощью CSS, но некоторые примеры всё же использовали не большие скрипты.

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

  • Скачать 20 новейших плагинов на JQuery и CSS3 за 2015 год
  • Макеты, иконки, шаблоны и ещё множество крутых штук за февраль 2015
  • Эффекты для ссылок, картинок и блоков на Вашем сайте с JQuery и CSS3
  • Крутые CSS3 штуки для веб — мастера совершенно бесплатно
  • Как сделать Flipping эффект для блока на CSS и JS

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Перейти

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Перейти

Ретро логотип

Данный логотип сделан на CSS, а также имеет бегунок, который позволит увеличить его.

Перейти

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Перейти

Длинная тень для текста

Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Перейти

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Перейти

Маска для текста на SVG

Перейти

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

Перейти

3d текст

Это игра с CSS тенями, но как Вы можете видеть, результат получился очень классным.

Перейти

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Перейти

Мигающий текст

Тут мы можем видеть довольно приглушающий свет для текста, который к тому же ещё и периодически мигает.

Перейти

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

Перейти

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Перейти

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Перейти

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

Перейти

Анимация — Tailwind CSS

Основное использование

Вращение

Добавьте утилиту animate-spin , чтобы добавить линейную анимацию вращения к таким элементам, как индикаторы загрузки.

 <тип кнопки="кнопка" отключена>
  
    
  
  Обработка...

​Ping

Добавьте утилиту animate-ping , чтобы сделать элемент масштабируемым и затухать, как сигнал радара или рябь воды — полезно для таких вещей, как значки уведомлений.

 <диапазон>
  <промежуток> 
  <промежуток>

​Pulse

Добавьте утилиту animate-pulse , чтобы элемент плавно появлялся и исчезал — полезно для таких вещей, как загрузчики скелетов.

 <дел>
  <дел>
    <дел>
    <дел>
      <дел>
      <дел>
        <дел>
          <дел>
          <дел>
<дел>