屏蔽 - 仅在某些 div 之上显示 div?
Masking - Show div only on top of certain div?
我正在尝试使用 HTML 和 CSS 创建一个 "eye blink" 动画。
我想要的是,当眼睛眨眼的时候,眼球没有出现。
从代码中可以看出,眼睛由4个元素组成
Div "eyes"是眼睛所在的容器
Div "eye1" 和 "eye2".
Div"eyemask",有闪烁效果
Div "eyeball1" 和 "eyeball2"。 这些应该只显示在 "eyemask" 之上,而不是在 "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>
这里有人可以帮我实现这个吗?
在 #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>
您可以像下面这样简化您的代码并依赖于剪辑路径动画:
.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 和 CSS 创建一个 "eye blink" 动画。
我想要的是,当眼睛眨眼的时候,眼球没有出现。
从代码中可以看出,眼睛由4个元素组成
Div "eyes"是眼睛所在的容器
Div "eye1" 和 "eye2".
Div"eyemask",有闪烁效果
Div "eyeball1" 和 "eyeball2"。 这些应该只显示在 "eyemask" 之上,而不是在 "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>
这里有人可以帮我实现这个吗?
在 #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>
您可以像下面这样简化您的代码并依赖于剪辑路径动画:
.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>