掩蔽 - 仅在某些 div 上显示 div？答案

【问题标题】：Masking - Show div only on top of certain div?掩蔽 - 仅在某些 div 上显示 div？
【发布时间】：2020-02-08 19:38:52
【问题描述】：

我正在尝试使用 HTML 和 CSS 创建一个“眨眼”动画。

我想要的是，当眼睛眨眼时，眼球不显示。

从代码中可以看出，眼睛由 4 个元素组成。

Div“眼睛”是眼睛所在的容器。

div“eye1”和“eye2”。

div“眼罩”，有眨眼的效果。

div“eyeball1”和“eyeball2”。 这些应该只显示在“眼罩”的顶部，而不是“eye1”和“eye2”的顶部。

有人可以帮我实现这个目标吗？

body {
  margin: 0px;
}

#container {
  position: absolute;
  z-index: 100;
  width: 300px;
  height: 300px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

#eyes {
  position: absolute;
  z-index: 12;
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#eye1,
#eye2 {
  z-index: 12;
}

#eye1,
#eye2,
#eyemask {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(50% at 50% 50%);
}

#eye2 {
  transform: translateX(60px);
}

#eyemask {
  background: #fff;
  animation-name: blink;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}

#eyeball1,
#eyeball2 {
  position: absolute;
  z-index: 11;
  width: 10px;
  height: 10px;
  background: #000;
  clip-path: circle(50% at 50% 50%);
}

<head>
  <link rel="stylesheet" type="text/css" href="Eyes.css">
</head>

<body>
  <div id="container">
    <div id="eyes">
      <div id="eye1">
        <div id="eyemask"></div>
        <div id="eyeball1"></div>
      </div>
      <div id="eye2">
        <div id="eyemask"></div>
        <div id="eyeball2"></div>
      </div>
    </div>
  </div>
</body>

这里有人可以帮我实现吗？

【问题讨论】：

标签： html css css-animations clip-path

【解决方案1】：

您可以像下面这样简化代码并依赖剪辑路径动画：

.eyes {
  padding:20px;
  background: lightblue;
  display: inline-flex;
}

.eyes span{
  width: 80px;
  height: 80px;
  background:grey;
  border-radius:50%;
  margin:10px;
  position:relative;
}
.eyes span:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(black 7px, white 8px);
  animation:blink 0.8s linear infinite alternate;
}
@keyframes blink {
  from {
    clip-path: ellipse(50% 50% at 50% 50%);  
  }
  to {
    clip-path: ellipse(50%  0% at 50% 50%);
  }
}

<div class="eyes">
  <span></span>
  <span></span>
</div>

【讨论】：

【解决方案2】：

在#eyemask 中创建#eyeball 就可以了

body {
  margin: 0px;
}

#container {
  position: absolute;
  z-index: 100;
  width: 300px;
  height: 300px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

#eyes {
  position: absolute;
  z-index: 12;
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#eye1,
#eye2 {
  z-index: 12;
}

#eye1,
#eye2,
#eyemask {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(50% at 50% 50%);
}

#eye2 {
  transform: translateX(60px);
}

#eyemask {
  background: #fff;
  animation-name: blink;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}

#eyeball1,
#eyeball2 {
  position: absolute;
  z-index: 11;
  width: 10px;
  height: 10px;
  background: #000;
  clip-path: circle(50% at 50% 50%);
}

<head>
  <link rel="stylesheet" type="text/css" href="Eyes.css">
</head>

<body>
  <div id="container">
    <div id="eyes">
      <div id="eye1">
        <div id="eyemask">
          <div id="eyeball1"></div>
        </div>
      </div>
      <div id="eye2">
        <div id="eyemask">
          <div id="eyeball2"></div>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

是的，如果没有其他解决方案，我会这样做。但是，如果我只想让白色部分闪烁，而不是眼球呢？使用像 Animate CC 这样的工具很容易实现，但我想知道我是否可以仅使用 HTML 和 CSS 来做到这一点。