html - 掩蔽 - 仅在特定 div 顶部显示 div？-6ren

html - 掩蔽 - 仅在特定 div 顶部显示 div？

转载作者：行者123 更新时间：2023-12-04 18:55:23

25

4

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

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

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

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

划分“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>

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

最佳答案

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

.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>

关于html - 掩蔽 - 仅在特定 div 顶部显示 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58338495/

25

4

0

文章推荐： cvs - cvs在MacOs-Catalina上坏了吗？ (无法获取工作目录)

文章推荐： regex - 如何将 map 与具有正则表达式键的字典一起使用？

文章推荐： regex - 您如何检查两个正则表达式是否描述相同的模式？

php - preg_replace() 相对路径到绝对路径。 (掩蔽？)
我正在尝试弄清楚如何屏蔽相对路径上的路径。这是我为 CSS 文件实现的自定义缩小器脚本，需要绝对相对路径。假设我在 CSS 文件中有以下内容 url('../images/file.jpg') 这个
php - 掩蔽 BG 图像
我正在尝试在我的 WordPress 图片/帖子中创建以下内容。我也需要它具有响应能力，所以我使用了 Bootstrap 3 和背景图片。帖子的代码片段: Titl
python - 加速 Numpy 掩蔽
在考虑如何优化方面，我仍然是一个成熟的人。我有这部分代码，它接受已找到的峰的列表，并找到这些峰，+/- 某个值，位于多维数组中的位置。然后它将 +1 添加到它们的 zeros 数组的索引中。代码运行良
c++ - DirectX alpha 掩蔽
我正在使用 DirectX 9 开发游戏。这是我正在尝试做的事情: 渲染场景后，我想在它上面渲染一些 Sprite :整个场景上的黑色覆盖物和一些 Sprite ，它们是显示覆盖物应该有孔的蒙版。到目
android - 掩蔽(裁剪)帧中的图像
有一个丰富的 UI 应用程序，我想在其中显示像这样复杂形状的图像现在我想要的是根据蒙版图像裁剪我的图像，实际上图像是动态的，可以从相机或图库(正方形或矩形形状)导入，我希望该图像适合在我上面的布局
actionscript-3 - Actionscript3 alpha 掩蔽？
我试图在谷歌地图应用程序上应用聚光灯效果。具体来说，我画了一个跟随鼠标的圆圈，并将其设置为 map 上的 mask 。问题是只显示了圆圈内的 map 区域，我知道它应该是面具的样子，但是有没有办法让圆
ios - OpenGL/GLSE alpha 掩蔽
我正在使用 OpenGL/GLSL 实现一个绘图应用程序。有一个功能，用户可以使用带有图案图像的画笔绘制“蒙版”，同时背景会根据画笔的位置而变化。看看视频就明白了:video 我使用 CALayer
html - 掩蔽 - 仅在特定 div 顶部显示 div？
我正在尝试使用 HTML 和 CSS 创建一个“眨眼”动画。我想要的是，当眼睛眨眼时，眼球不显示。从代码中可以看出，眼睛由 4 个元素组成。 Div“眼睛”是眼睛所在的容器。划分“eye1”和“
c++ - 通过 Alpha 混合的 OpenGL 掩蔽
我正在尝试渲染 3 种纹理，-背景- 黑/白前景 mask -前景我用过这个OpenGL - mask with multiple textures因为它准确地描述了我的问题。但我无法让它工作。我只
python - 具有不同时间步长的 RNN 的 Keras 掩蔽
我正在尝试使用具有不同时间长度的序列在 Keras 中拟合 RNN。我的数据位于格式为 (sample, time, feature) = (20631, max_time, 24) 的 Numpy
python - 使用 Tensorflow SparseTensors 进行高效 bool 掩蔽
所以，我想屏蔽 SparseTensor 的整行。使用 tf.boolean_mask 很容易做到这一点，但没有与 SparseTensor 等效的方法。目前，我可以只遍历 SparseTensor.
ios - 使用 UIImage pngData() 进行 CGImage 掩蔽
我正在尝试快速屏蔽图像。这是我的代码: (通常，originalImg 是从 UIImagePickerController 加载的图像，然后由 UIGraphicsGetImageFromCurre
c# - c# System.Drawing 中的 Alpha 掩蔽？
我正在尝试使用 System.Drawing.Graphics 使用源 Bitmap 和 alpha 掩码 Bitmap 绘制图像目的。目前我循环 X 和 Y 并使用 GetPixel 和 SetPi

首页

博学

6Ren·AI

商城

html - 掩蔽 - 仅在特定 div 顶部显示 div？