Question

我试图找到一种干净的方式，以循环方式在大图像周围浮动多个图像气泡。

每张图片可能不会超过六个气泡，但我希望找到一种递归且反应灵敏的方式来围绕任意大小的父图像定位这些气泡。这些父图像的高度/宽度相等，不低于100px。（100 x 100,130 x 130，等等。）

不确定如何做到这一点，同时使其响应屏幕大小并在所有主要浏览器上受支持。如果可以使用纯css / sass，并且没有外部库，我也会更喜欢。

到目前为止

HTML

<div id="body">
    <div id="background">
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
    </div>
</div>

CSS （#body和#background只是演示容器）

#body {
    height:500px;
    width:500px;
}
#background {
    background:#F9F9F9;
}
.company-container {
    display:inline-block;
    padding:20px;
}
.company {
    border-radius: 80px;
    display: block;
    height: 130px;
    width: 130px;
    margin: 15px auto;
    background:#E5E5E5;
}
.company:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble {
    border-radius: 30px;
    width: 40px;
    height: 40px;
    position:absolute;
    top:0;
    border: solid 1px red;
}
.company-side-bubble:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble:nth-of-type(2) {
    margin-top: 15px;
    margin-left: 44px;
}
.company-side-bubble:nth-of-type(3) {
    margin-top: 34px;
    margin-left: 91px;
}
.company-side-bubble:nth-of-type(4) {
    margin-left: 109px;
    margin-top: 81px;
}

Answer 1

你可以用百分比代替像素作为单位。

此外，您还需要使用translateX和translateY来补偿小图像的宽度和高度。

在这里，我为你完成了这项工作：http://jsfiddle.net/qatkr261/2/

.company-side-bubble:nth-of-type(2) {
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(25%);
}
.company-side-bubble:nth-of-type(3) {
  top: 25%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(4) {
  right: 0%;
  top: 50%;
  transform: translateX(-25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(5) {
  top: 75%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(6) {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-25%);
}
.company-side-bubble:nth-of-type(7) {
  bottom: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(50%);
}
.company-side-bubble:nth-of-type(8) {
  top: 50%;
  left: 0%;
  transform: translateX(25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(9) {
  top: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(-50%);
}

我已经修改了其他类的一些css以使其工作，最重要的是：.company不再有top：0并且它现在的边缘是均匀的（所有四边相等）并且已经增长，。公司 - 集装箱丢失填充（由.company边际补偿）并获得位置：相对

<强>更新

如果你想让气泡传播，你需要为每一个做出额外的选择，如下所示：

.company:hover ~ .company-side-bubble:nth-of-type(2) {
  top: -5%;
}
.company:hover ~ .company-side-bubble:nth-of-type(3) {
  top: 20%;
  right: 20%;
}
.company:hover ~ .company-side-bubble:nth-of-type(4) {
  right: -5%;
}
...

将小图像放置在大图像周围的圆形阵列中

1 个答案: