是否可以做不重叠的阴影?
is it possible to do non-overlapping shadows?
如果你把鼠标放在药丸状的东西上,它会移动到圆上(我想要发生的事情),但圆的阴影将保持可见。
我希望阴影互不影响,又要透明
body {
background-color: aqua;
}
#circle1, #circle2 {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 0;
background-color: white;
}
#pill1, #pill2 {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#pill2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#circle2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
@keyframes animation {
0% {right: 0px;}
100% {right: 58px;}
}
#pill1:hover, #pill2:hover {
animation: animation 0.5s linear forwards;
}
<div id="circle1"></div>
<div id="pill1"></div>
<div id="circle2"></div>
<div id="pill2"></div>
忘记说了,应该是动画吧。我把它放在这里作为过渡,但它没有用。我刚刚修复它,所以它现在是一个动画。
右边的是我想要的,但那是最大不透明度。
您可以移除 circle
悬停时的阴影并使其 z-index 高于 pill
以捕捉其悬停状态:
body {
background-color: aqua;
}
#circle {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 2;
background-color: white;
}
#pill {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#circle:hover + #pill, #pill:hover {
right: 58px;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid the issue of hovering only the pill and not the circle*/
#circle:hover::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100px;
}
<div id="circle"></div>
<div id="pill"></div>
更新
顺便说一句,您可以像这样简化代码:
我也包括了转换
body {
background-color: aqua;
}
#circle {
position: relative;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:before {
content:"";
position: absolute;
top:0;
left:80px;
height: 100%;
width: 100px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:hover::before {
left:0;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid glitchs*/
#circle:after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:200px;
}
@keyframes animation {
0% {left: 80px;}
100% {left: 0;}
}
<div id="circle"></div>
如果你把鼠标放在药丸状的东西上,它会移动到圆上(我想要发生的事情),但圆的阴影将保持可见。 我希望阴影互不影响,又要透明
body {
background-color: aqua;
}
#circle1, #circle2 {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 0;
background-color: white;
}
#pill1, #pill2 {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#pill2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#circle2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
@keyframes animation {
0% {right: 0px;}
100% {right: 58px;}
}
#pill1:hover, #pill2:hover {
animation: animation 0.5s linear forwards;
}
<div id="circle1"></div>
<div id="pill1"></div>
<div id="circle2"></div>
<div id="pill2"></div>
忘记说了,应该是动画吧。我把它放在这里作为过渡,但它没有用。我刚刚修复它,所以它现在是一个动画。
右边的是我想要的,但那是最大不透明度。
您可以移除 circle
悬停时的阴影并使其 z-index 高于 pill
以捕捉其悬停状态:
body {
background-color: aqua;
}
#circle {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 2;
background-color: white;
}
#pill {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#circle:hover + #pill, #pill:hover {
right: 58px;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid the issue of hovering only the pill and not the circle*/
#circle:hover::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100px;
}
<div id="circle"></div>
<div id="pill"></div>
更新
顺便说一句,您可以像这样简化代码:
我也包括了转换
body {
background-color: aqua;
}
#circle {
position: relative;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:before {
content:"";
position: absolute;
top:0;
left:80px;
height: 100%;
width: 100px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:hover::before {
left:0;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid glitchs*/
#circle:after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:200px;
}
@keyframes animation {
0% {left: 80px;}
100% {left: 0;}
}
<div id="circle"></div>