CSS3/jquery 中的暗黑破坏神之类的球体答案

【问题标题】：Diablo like orbs in CSS3/jqueryCSS3/jquery 中的暗黑破坏神之类的球体
【发布时间】：2011-12-14 09:50:18
【问题描述】：

你好，有什么方法可以创建像暗黑破坏神 hp/mana orb 这样的东西吗？ http://i.stack.imgur.com/LAsDB.jpg 我的意思是过渡和重叠的圆圈。我可以使用 imagemagick、php、css3、html5、gd2、jquery

【问题讨论】：

标签： php jquery html css

【解决方案1】：

首先是好消息：您不需要为此使用 imagemagick 或 gd2。

您将从作为基本面板的静态图像开始，包括空的球体。

您需要将其创建为 PNG 图像，以便您可以使用 PNG 的 alpha 通道透明度功能。使用此功能在球体上制作玻璃效果。您可以使用 Photoshop（或 Gimp 等）创建图形。

一旦你有了这个图形，并且你把它放置在浏览器中，它就变成了在这个主图形后面分层的动画液体效果，以创建它在球体内的效果。由 alpha 透明度产生的玻璃效果将允许液体图形显示出来，同时在前景中仍然具有玻璃的光泽。

要为液体设置动画，请使用 jQuery。我无法真正详细说明，因为我不知道您想要多少动画。如果您要一路走下去并让它冒泡等，那么您还需要为此创建图形。

但重要的一点，也是您问题的答案，主要效果是通过在静态前景图像后面叠加液体来实现的。

希望对您有所帮助。

【讨论】：

但是如果用户有不同的分辨率怎么办？
@KryQ - 你没有在问题中提到这一点。您有一个选择：要么根据需要以高分辨率和比例执行上述操作，要么切换到矢量图形格式（即 SVG）而不是 PNG。不过，将图像分层以实现效果的基本技术将保持不变。

【解决方案2】：

这样的事情怎么样。

这是纯 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;
}

【讨论】：

【解决方案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)，您可以将其用于这些球体。

【讨论】：

这是一个不错的图书馆，但我无法将顶部削减到 percetage :(
什么意思？您可以使用该库绘制任何您想要的东西。

【解决方案5】：

好的

首先有这个宝石： http://raphaeljs.com/ball.html

全部由 JS + SVG 完成。非常接近暗黑破坏神 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】：

最简单且跨浏览器兼容的方法可能是为每个百分比创建一个sprite map（100 个小图像并填写“数量”）。

【讨论】：