Анимированная CSS3 гистограмма. 3d гистограмма CSS3

Анимированная CSS3 гистограмма. 3d гистограмма CSS3

Анимированная CSS3 гистограмма. 3d гистограмма CSS3

FULL DEMO

Создание красивой 3d гистограммы. Несколько баров размещены друг под другом и при наведении, анимация оживает и полоса растет до соответствующего размера.
Это отличный пример показать, что вы можете сделать с гибким CSS; Вы можете создать совершенно другую страницу с тем же HTML и используя другой файл стилей.
Обратите внимание, этот пример проверен и работает только в -webkit браузерах (Safari и Chrome), в них он показывает все эффекты (закругленные углы, градиенты, тени, RGBA и т.д.), но самое главное: анимация.

HTML
<ul id="bar">
   <li id="iphone">
      <div class="top">
         <img src="images/iphone.png" alt="iPhone" />
      </div>
      <div class="bottom">
         <div class="infobox">
            <h3>iPhone</h3>
            <p>80,1</p>
         </div>
      </div>
   </li>
   <!-- Дополнительные элементы гистограммы -->
</ul>

CSS
#bar li div.top { float:left; margin-left:10px;
   width:40px; height:100px; -moz-border-radius: 40px/100px; -webkit-border-radius: 40px 100px; border-radius: 40px/100px;
   -webkit-transition-property: margin-left;
   -webkit-transition-duration: 500ms;
}
 
#bar li div.bottom { width:50px;
   height:100px; -moz-border-radius: 40px/100px; -webkit-border-radius: 40px 100px; border-radius: 40px/100px;
   -webkit-transition-property: width;
   -webkit-transition-duration: 500ms;
}

Класс .top включает набор transition-property с margin-left, так как нужно двигаться вправо при наведении курсора мыши. Класс .bottom включает набор transition-property для width, так как мы должны расширяться / расти при наведении курсора мыши. Длительность и устанавливается на 500ms, но это можно изменить.

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

#iphone:hover div.top {
   margin-left:160px;
}
 
#iphone:hover div.bottom {
   width:200px;

Поскольку transition-property был установлен, чтобы действовать с заданными свойствами, анимация работает, как ожидалось. .top Будет двигаться вправо, а .bottom будет расширяться / растягиваться в ширину. Из-за этого синтаксиса, возможно другие браузеры, такие как Firefox будут показывать расширение тоже, но без анимации (пока).

Есть еще одна аккуратная анимация — ( .infobox).

#bar li div.bottom div.infobox {
   -webkit-transition-property: color;
   -webkit-transition-duration: 500ms;
}
 
#bar li:hover div.bottom div.infobox {
   color:#eee;
}
 
#bar li div.bottom div.infobox p {
   opacity: 0;
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 500ms;
}
 
#bar li:hover div.bottom div.infobox p {
   opacity:1;

.infobox имеет заголовок и абзац с номером. Infobox постепенно меняет цвет шрифта на другой цвет, а пункт с числом медленно исчезает, путем изменения opacity от 0 до 1. Эти маленькие вещи делают дизайн немного лучше.

Заключение и Скачать

Это пока работает только в некоторых браузерах. Тем не менее, это довольно крутой пример того, что CSS3 (анимация) может сделать. Просто для записи, Да, вы можете создать этот эффект с помощью JQuery тоже. Тем не менее, это полное решение для анимированной CSS3 гистограммы без  JQuery, поэтому используется transition для этого эффекта.

Скачать

  • iPhone

    iPhone

    80,1

  • MacBook

    MacBook

    102,6

  • iPod

    iPod

    198,4

  • Cinema Display

    Cinema Display

    38,2

  • Mac Mini

    Mac Mini

    55,6

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

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