О коде

  

Эффект броска переворота книги

  

Эффекты трехмерного сползания, поздравительные поздравления.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-ролик: макет стиля комиксов «title =« Макет стиля комиксов »/> </figure>
<div class=     

      

Автор

      

  • Aysha Anggraini
  •         

  •       

  
  
  

  

О коде

  

Макет стиля комиксов

  

Хорошая компоновка стиля комиксов с сеткой CSS.

  

Совместимые браузеры: Chrome, Firefox, Opera, Safari

  

Зависимости:

 Демонстрационное изображение: макет книги «title =« Книжный макет »/> </figure>
<div class=     

      

Автор

      

  • Эрин Э. Салливан
  •         

  •       

  
  
  

  

О коде

  

Книжный макет

  

Отзывчивый skeuomorph макет книги упакованный с забавными маленькими чертами.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-изображение: просмотр 3D-книг «title =" Просмотр трехмерных книг "/> <img class=     

      

Автор

      

  • Джон Кантнер
  •         

  •       

  
  
  

  

О коде

  

Просмотр 3D-книг

  

Демо-версия только для CSS, которая имитирует сбор книг с полки и предварительный просмотр страницы (при наведении) на человека первого лица. Все это работает с использованием ярлыка s и внесетевого радио ввода для каждой книги, а вход сброса в качестве кнопки возврата позволяет вернуть все в исходное положение.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-версия: Открытие книги Анимация "title =" Анимация открытия книги "/> </figure>
<div class=     

      

Автор

      

  • Валерия
  •         

  •       

  
  
  

  

О коде

  

Открытие книги Анимация

  

Анимация открытия книги в чистом CSS.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-ролик: отзывчивый макет комиксов «title =« Отзывчивая макет комиксов »/> </figure>
<div class=     

      

Автор

      

  • Крис Смит
  •         

  •       

  
  
  

  

О коде

  

Отзывчивая макет комиксов

  

Отзывчивый макет с использованием flexbox с нарративным текстом и речевыми пузырями, стилизованными в CSS. Фоновые шаблоны также в CSS. Единственное приемлемое использование шрифта Comic Sans.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-ролик: Книга переворота "title =" Book Flip "/> <img class=     

      

Автор

      

  • Томас Подгродски
  •         

  •       

  
  

    

Сделано с

    

  • HTML / CSS (меньше) / JavaScript
  •     

  

  

О коде

  

Книжный флип

  

CSS книга переворачивается с небольшим jQuery.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: jquery.js

 Демо-изображение: книжная полка Jumpy "title =" Книжная полка Jumpy "/> <img class=     

      

Автор

      

  • Райан Маклафлин
  •         

  •       

  
  
  

  

О коде

  

Книжная полка Jumpy

  

Эта анимация — это просто пасхальное яйцо. Мы стараемся приложить немного неожиданного удовольствия, когда можем, когда разрабатываем наши продукты. Это было частью веб-приложения Cup Helix, которое мы только что запустили, где один из опытных арендаторов был просто: «весело». Книги были использованы на загружаемой панели ресурсов, но если вам посчастливилось навести на них курсор мыши, они будут прыгать!

  

Совместимые браузеры: Chrome, Firefox, Opera, Safari

  

Зависимости:

 Демо-изображение: Чистая книга животных для животных «title =« Чистая книга животных CSS »/> </figure>
<div class=     

      

Автор

      

  • Ana Tudor
  •         

  •       

  
  
  

  

О коде

  

Pure CSS Animal Book

  

Переместите курсор мыши слева направо / справа налево.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-ролик: Анимированные книги с CSS 3D-преобразованиями "title =" Анимированные книги с CSS 3D-преобразованиями "/> <img class=     

      

Автор

      

  • Марко Барриа
  •         

  •       

  
  
  

  

О коде

  

Анимированные книги с CSS 3D-преобразованиями

  

Творческий способ отображения интерактивных книг с использованием CSS 3D transform s.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости:

 Демо-ролик: 3D-книжная витрина «title =" 3D Book Showcase "/> <img class= О коде

  

3D-книжная витрина

  

Эксперимент по реалистично выглядящей книжной витрине с некоторой интерактивностью с использованием CSS 3D transform s.

  

Совместимые браузеры: Chrome, Firefox, Opera, Safari

  

Зависимости:

Category: Статьи по дизайну
Теги: 

Пожалуйста, поставьте рейтинг статье:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Share with Google+Share with PinterestShare with LinkedInShare with WhatsApp
Go to Top

Поделитесь статьей!

close-link