Question

背景故事/背景 我正在做孩子的活动，孩子会听到声音并决定用什么颜色来画一个catterpillar身体的一部分。这必须是响应。我只使用HTML，CSS和Javascript。 Bootstrap正在照顾我的响应方，我在％或vmin / vmax中使用了测量... 我需要能够分别处理身体的每个部分，所以我可以根据用户的选择给它上色！

到目前为止： 我尝试使用一个内部有20个div的div，每个div用于每个部分都有一个图像的部分，我尝试用CSS绘制它们;我也尝试了第一种方法，只有一个div和里面的一切......

问题： 当我调整窗口大小时，到目前为止所有解决方案都失败了。我尝试将位置视为绝对的，相对的，......

所以：我需要定位最多20个圈子，CSS或SVG（最好），可以通过用户交互（点击它来改变颜色）自己解决，以及在调整窗口大小时保持其形状。

下面我要用html重新创建一个catterpillar的图像：

Catterpilar

任何提示，指示或操作方法都会有所帮助。或者如果您对如何解决这个问题有任何其他看法......

干杯！

Answer 1

有几种方法可以让你的catterpillar响应。你可以使用svg，多个元素/伪元素，盒子阴影......

以下是使用多个box shadows和此处描述的appraoch的示例：Overlapping circles in CSS with 1 div使用第二个示例与视口相关的单位：

<强> DEMO

＆＃13;

div{
  width:20vmin; height:20vmin;
  border-radius:50%;
  background:gold;
  margin:0 auto;
  box-shadow: -10vmin   1vmin  0  .2vmin teal,
              -18vmin  .5vmin  0   1vmin pink,
              -25vmin  .8vmin  0  .5vmin tomato,
              -37vmin   1vmin  0  .2vmin green,
              -50vmin   1vmin  0  .5vmin teal,
              -63vmin   1vmin  0  .2vmin aqua;
}

＆＃13;

<div></div>

＆＃13;

以下是使用带圆圈元素的svg的示例：

＆＃13;

svg{
  display:block;
  width:100%;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
    <circle cx="35" cy="10" r="4" fill="green" stroke="black" stroke-width="0.5" />
    <circle cx="40" cy="9" r="5.1" fill="teal" stroke="black" stroke-width="0.5" />
    <circle cx="46" cy="11" r="5" fill="pink" stroke="black" stroke-width="0.5" />
    <circle cx="50" cy="10" r="4" fill="tomato" stroke="black" stroke-width="0.5" />    
</svg>

＆＃13;

Answer 2

由于您想要着色圆形，我们可以使用边长为50％的DIV元素。您可以将所有内容保持为百分比，甚至可以通过这种方式模拟圆圈边框宽度：

var circles = [
    {
        left: 5,
        top: 5,
        radius: 5
    },
    {
        left: 7.5,
        top: 7,
        radius: 8
    },
    {
        left: 11.5,
        top: 10,
        radius: 8
    },
    {
        left: 14.5,
        top: 14,
        radius: 9
    }
];
var wormBox = $('.worm');
$.each(circles, function(i, data) {
    var circle = $('<div class="circle"><div class="color"></div></div>');
    circle.css({
        'width': data.radius+'%',
        'padding-bottom': data.radius+'%',
        'left': data.left+'%',
        'top': data.top+'%'
    });
    circle.appendTo( wormBox );
});
$('.color').on('click', function(e) {
   // Test color with random
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    $(this).css({
        'background-color': randomColor
    });
});

.worm {
    position: relative;
    padding-bottom: 50%;
    border: 1px solid #000;
}
.circle {
    position: absolute;
    display: block;
    border: 1px solid #000;
    border-radius: 50%;
    background: none #000;
}
.color {
    position: absolute;
    top: 3%;
    right: 3%;
    bottom: 3%;
    left: 3%;
    width: 94%;
    background: none #fff;
    border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="worm"></div>

调整浏览器宽度会调整.worm内的所有元素的大小。单击圆圈将添加随机背景颜色。

请注意：我使用的是脚本，但结果是纯HTML / CSS（您只需要脚本进行着色）。

另一个注意事项：既然你使用纯HTML，那么你也可以为你的蠕虫设置动画。

同样的脚本也位于 Fiddle 。

Answer 3

使用图像和绝对定位的方法可行，但使用left属性的百分比值：

http://jsfiddle.net/0dea7r75/

<div class="catterpillar">
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c1" />
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c2" />
</div>

CSS

.catterpillar {
    width: 50%; // use a percantage for the width of the catterpillar
    position:relative;
}

.cirlce {
    position:absolute;
}

.c1 {
    width:5%; // use percentage for width and left
    left: 0%;
    top: 0;
}

.c2 {
    width:8%; 
    left: 3%;
    top: 5px;
}

如何绘制响应形状

3 个答案: