创建响应式眼睛焦点图标 [英] Creating responsive eye focus icon

问题描述

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

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

div 的高度目前是静态的，但我希望它具有响应性.所以整个眼睛可以在不同的尺寸上适当地缩放.

这是我的代码:

<div class="eye1" width="80%"><div class="eye2"></div>

.eye1 {高度:200px；高度:计算(属性(宽度)/2.5)；宽度:75%；背景颜色:白色；边界半径:50%；位置:相对；保证金:自动；}.eye2 {背景颜色:黑色；宽度:8%；高度:12%；边界半径:50%；边框:0.5em 实心 #a50；框阴影:0 0 0 1.5em #080；位置:绝对；顶部:40%；左:45%；}.eye-focus {位置:相对；}

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

解决方案

我想把我的解决方案放在那里.
您可以使用 background Radial-gradient 在单个元素中创建眼睛.
在 % 中添加 padding 时，它基于元素的宽度.充分利用这一点，使其响应迅速.如果 padding 等于 width，则元素为正方形.

.eye-focus {box-sizing: 内容框；高度:0；宽度:75%；填充:30% 0 0 0；边距:0 自动；边界半径:50%；背景色:#fff;背景图像:径向渐变(圆形，#000 8%，#a50 8%，#0b0 17%，#080 33%，透明 33%)；}

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

jsfiddle

I've been trying to make responsive colored eye focus icon, but so far all I've tried has been unsuccessful.

I was trying to somewhat replicate the colors of a real eye. I used border, box shadow, to get the colors, but that part is not scaling. Tried with outline too, but failed as well, that one wasn't even round.

The height of the div is currently static, but I would like it to be responsive. So the whole eye scales properly across different sizes.

Here's my code:

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

jsfiddle if you'd prefer https://jsfiddle.net/xcxdp92q/

解决方案

I'd like to put my solution out there.
You can use background radial-gradient to create the eye in a single element.
When adding padding in %, it is based on the width of the element. Use that to your advantage to make it responsive. If padding equals width, the element will be a square.

.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

这篇关于创建响应式眼睛焦点图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！