Diablo как шары в CSS3 / jquery

Question

Здравствуйте, есть ли способ создать что-то вроде Diablo HP / Mana Orb?http://i.stack.imgur.com/LAsDB.jpg Я имею в виду переходы и перекрывающиеся круги.Я могу использовать imagemagick, php, css3, html5, gd2, jquery

Answer 1

Как на счет этого.

Это чистый CSS (без картинок)

Fiddle

HTML

<a href="#" class="orb">
    The Orb
</a>

CSS

.orb {
    width: 200px;
    text-decoration: none;
    height: 200px;
    display: block;
    text-align: center;
    color: #222;
    font-size: 2.5em;
    line-height: 4.5em;
    font-family: sans-serif;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    box-shadow: inset 0 0 20px #666, 0 0 5px #999;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.orb:hover {
    background: rgba(255, 0, 0, 0.75);
    box-shadow: inset 0 0 10px #666, 0 0 50px rgba(255, 0, 0, 0.75);
    color: #fff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Answer 2

Сначала хорошие новости: вам не нужно использовать imagemagick или gd2 для этого.

Вы начнете со статического изображения, которое будет основной панелью, включая пустые шары.

Вам потребуется создать это изображение в формате PNG, чтобы можно было использовать функцию прозрачности альфа-канала PNG. Используйте эту функцию для создания эффекта стекла на шарах. Вы бы создали это с помощью Photoshop (или Gimp и т. Д.).

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

Чтобы оживить жидкость, используйте jQuery. Я не могу вдаваться в подробности, так как не знаю, сколько анимации вы хотите. Если вы собираетесь пройти весь путь, и у него будет пузыриться и т. Д., Вам также потребуется создать графику для этого.

Но важный момент и ответ на ваш вопрос заключается в том, что основной эффект достигается простым наложением жидкости за статичным изображением на переднем плане.

Надеюсь, это поможет.

Answer 3

ОК

Прежде всего, есть этот камень: http://raphaeljs.com/ball.html

Все сделано JS + SVG.Очень близко к сферам здоровья / маны Diablo 1 (насколько я их помню)

Для более простого (не настолько визуально точного) решения используйте это:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="200" cy="200" r="150" stroke="black" stroke-width="2" fill="red"  fill-opacity="0.6" />
<circle cx="140" cy="140" r="40" stroke-opacity="0.3" stroke="red"  stroke-width="1" fill="white"  fill-opacity="0.4" /> 
</svg>

Эффект наполнения может бытьдостигается путем настройки непрозрачности (заливка и обводка) с помощью простого JS.

Answer 4

Этого можно добиться, используя умные тени и фоновые изображения:

#orb {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,1);
  cursor: pointer;
  border-radius: 100px;
  overflow: hidden;
  background: transparent url(http://www.contemporaryartsociety.org/media/uploads/2010/04/4286/20-poland-flag-jpg.jpg) 50% 50% no-repeat;
  color: #000;
  line-hieght: 100px;
  font-size: 72px;
  text-align: center;
}

и небольшой кусочек JavaScript:

//event that adds or substracts health
$(this).animate({'background-position-y': Math.random()*100 + "%"}, 500)

Смотрите его в действии здесь: http://jsfiddle.net/FhpVD/

Answer 5

Вы можете использовать SVG для создания этого. Взгляните на библиотеку Raphael JS для кросс-браузерной графики (http://raphaeljs.com/). Там есть хороший эффект градиента (http://raphaeljs.com/ball.html), который вы можете использовать для этих шаров.

Answer 6

Самый простой и совместимый с браузером способ может заключаться в создании спрайтовой карты каждого процента (100 небольших изображений с заполненным «количеством»).