热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

如何解决《遮罩-仅在特定div上方显示div?》经验,应该怎么弄,您有好建议吗?

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

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

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

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

Div“ eye1”和“ eye2”。

Div“眼罩”,具有闪烁效果。

Div“眼球1”和“眼球2”。这些应仅显示在“眼罩”的顶部,而不应显示在“ 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%);
}

  



  

有人可以帮我实现这一目标吗?


推荐阅读
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 本文介绍了一个来自AIZU ONLINE JUDGE平台的问题,即清洁机器人2.0。该问题来源于某次编程竞赛,涉及复杂的算法逻辑与实现技巧。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • 在项目冲刺的最后一天,团队专注于软件用户界面的细节优化,包括调整控件布局和字体设置,以确保界面的简洁性和用户友好性。 ... [详细]
  • JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时(如关闭页面或刷新页面),会触发 onunload 事件,此时可以执行预设的脚本。需要注意的是,不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 探索Java 11中的ZGC垃圾收集器
    Java 11引入了一种新的垃圾收集器——ZGC,由Oracle公司研发,旨在支持TB级别的内存容量,并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]
  • 本文将探讨如何在 Struts2 中使用 ActionContext 和 ServletActionContext 来获取请求参数和会话信息,同时解释它们的内部机制和最佳实践。 ... [详细]
author-avatar
手机用户2502918505
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有