Question

我一直在努力制作响应式彩色眼睛焦点图标，但到目前为止，我所尝试过的一切都没有成功。

我试图在某种程度上复制真实眼睛的颜色。我用边框，框阴影来获取颜色，但那部分没有缩放。也尝试过轮廓，但也失败了，那个甚至不圆。

div的高度目前是静态的，但我希望它具有响应性。因此，整个眼睛在不同尺寸下适当缩放。

这是我的代码：

<div class="paragraph eye-focus">
  <div class="eye1" width="80%">
    <div class="eye2"></div>
  </div>
</div>

.eye1 {
  height: 200px;
  height: calc(attr(width) / 2.5);
  width: 75%;
  background-color: white;
  border-radius: 50%;
  position: relative;
  margin: auto;
}

.eye2 {
  background-color: black;
  width: 8%;
  height: 12%;
  border-radius: 50%;
  border: 0.5em solid #a50;
  box-shadow: 0 0 0 1.5em #080;
  position: absolute;
  top: 40%;
  left: 45%;
}

.eye-focus {
  position: relative;
}

如果你更喜欢https://jsfiddle.net/xcxdp92q/

，那就是jsfiddle

Answer 1

如果您只支持support gradients（以及当前浏览器最常用的浏览器），那么您可以使用一个div并以径向渐变执行所有颜色。我使用vw来调整大小，就像Suthan Bala在评论中所建议的那样。

body {
  background: #EEE;
}

.eye {
  border-radius: 50%;
  background: -moz-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
  background: -webkit-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
  background: radial-gradient(ellipse at center, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
  width: 35vw;
  height: 35vw;
}

<div class="eye">
  &nbsp;
</div>

我使用了Color Gradient Generator by Colorzilla。

Answer 2

我想把我的解决方案放在那里您可以使用background radial-gradient在单个元素中创建眼睛以％为单位添加填充时，它基于元素的宽度。使用它有利于使其具有响应性。如果填充等于宽度，则元素将为正方形。

.eye-focus {
  box-sizing: content-box;
  height: 0;
  width: 75%;
  padding: 30% 0 0 0;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #fff;
  background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 17%, #080 33%, transparent 33%);
}

<div class="paragraph">
  <div class="eye-focus"></div>
</div>

jsfiddle

Answer 3

尝试使用此CSS：

.eye1 {
  height: 4vw;
  width: 4vw;
  background-color: white;
  border-radius: 50%;
  position: relative;
  margin: auto;
}

.eye2 {
  background-color: black;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  border: 1em solid #a50;
  box-shadow: 0 0 0 3vw #080;
  position: relative;
  top: 8vw;
  left: 43%;
}

.eye-focus {
  position: relative;
}

我最近一直在使用vw（现在已经一年了）。非常方便！

创建响应式眼睛焦点图标

3 个答案:

jsfiddle