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

ProgramBox

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

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#php #jquery #html #css

#php #jquery #HTML #css

Вопрос:

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

Ответ №1:

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

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

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

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

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

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

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

1. но что делать, если у пользователя другое разрешение?

2. @KryQ — вы не упомянули об этом в вопросе. У вас есть выбор: либо выполнить описанное выше в высоком разрешении и масштабировать по мере необходимости, либо переключиться на формат векторной графики (т.Е. SVG) вместо PNG. Основная техника наложения изображений для достижения эффекта останется прежней.

Ответ №2:

Как насчет чего-то подобного.

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

Скрипка

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;
}

Ответ №3:

Вы можете достичь этого с помощью умных выпадающих теней и фоновых изображений:

 #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 /

введите описание изображения здесь

Ответ №4:

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

Ответ №5:

ОК

Прежде всего, есть этот драгоценный камень: 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.

Ответ №6:

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

Метки: Diablo как шары в CSS3 /jquery