Question

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

我想要的是，当眨眼时，眼球没有显示出来。

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

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

将“ eye1”和“ eye2”分开。

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>

这里有人可以帮助我实现这一目标吗？

Answer 1

您可以像下面那样简化代码，并依靠剪切路径动画：

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

const shareButton = document.querySelector('.share-button');
const shareDialog = document.querySelector('.share-dialog');
const closeButton = document.querySelector('.close-button');

shareButton.addEventListener('click', event => {
  shareDialog.classList.add('is-open');
});

closeButton.addEventListener('click', event => {
  shareDialog.classList.remove('is-open');
});

Answer 2

将#eyeball放在#eyemask内，应该这样做

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>

遮罩-仅在特定div上方显示div？

2 个答案: