用css悬停的动画面具和隐藏圈

Question

我想用这个设计制作信息框。

这个设计对我很重要。当鼠标在圆圈上方时，我需要一些动画并将设计转换为...

jsFiddle Example :

.wrapper{
    width:400px;
    height:200px;
    background: white;
    position: relative;
}
.mask {
    width: 100%;
    height: 100%;
    background: green;
    background-size: cover;
    transition: 0.4s ease;
    clip-path: circle(80px at 50% 50%);
    position: relative;
}
.mask:hover {
    clip-path:  circle(100% at 50% 50%);
}
.wrapper:after {
    content: ' ';
    display: block;
    position: relative;
    width: 160px;
    height: 160px;
    top: calc(-50% - 83px);
    left: calc(50% - 83px);
    border-radius: 50%;
    background:transparent;
    border: 3px solid #fff;
    box-shadow: 0px 0px 6px #aaa;
    pointer-events: none;
}

<div class="wrapper">
    <div id="map-canvas" class="mask">
    
    </div>
</div>

但我不知道如何隐藏这个圆圈。

http://127.0.0.1:3000/editor/spec

有没有解决方法如何制作和隐藏带有边框和阴影的圆圈？

Answer 1

尝试使用wrapper:after

的过渡和不透明度

您希望在悬停时透明伪元素after，并使用.wrapper:hover:after定位它。

.wrapper{
  width:400px;
  height:200px;
  background: white;
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  background: green;
  background-size: cover;
  transition: 0.4s ease;
  clip-path: circle(80px at 50% 50%);
  position: relative;
}
.mask:hover {
  clip-path:  circle(100% at 50% 50%);
}
.wrapper:after {
  content: ' ';
  display: block;
  position: relative;
  width: 160px;
  height: 160px;
  top: calc(-50% - 83px);
  left: calc(50% - 83px);
  border-radius: 50%;
  background:transparent;
  border: 3px solid #fff;
  box-shadow: 0px 0px 6px #aaa;
  pointer-events: none;
  opacity:1;
  transition: all 0.5s forwards ;   /*added */
}
.wrapper:hover:after{
  opacity:0 ;                      /*added */
}

<div class="wrapper">
  <div id="map-canvas" class="mask">

  </div>
</div>

如果你想在悬停时想要一些动画，你也可以使用以下代码：

.wrapper{
  width:400px;
  height:200px;
  background: white;
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  background: green;
  background-size: cover;
  transition: 0.4s ease;
  clip-path: circle(80px at 50% 50%);
  position: relative;
}
.mask:hover {
  clip-path:  circle(100% at 50% 50%);
}
.wrapper:after {
  content: ' ';
  display: block;
  position: relative;
  width: 160px;
  height: 160px;
  top: calc(-50% - 83px);
  left: calc(50% - 83px);
  border-radius: 50%;
  background:transparent;
  border: 3px solid #fff;
  box-shadow: 0px 0px 6px #aaa;
  pointer-events: none;
  transition: all 0.5s ease-in ;


}
.wrapper:hover:after{
  opacity:0 ;
   transition: all 0.5s forwards ;
}

<div class="wrapper">
  <div id="map-canvas" class="mask">

  </div>
</div>

Answer 2

如果您愿意，也可以取消border和box-shadow :hover以及transition的更改。

＆＃13;

＆＃13;

.wrapper{
  width:400px;
  height:200px;
  background: white;
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  background: green;
  background-size: cover;
  clip-path: circle(80px at 50% 50%);
  position: relative;
}
.mask, .wrapper:after {
  transition: 0.4s ease;
}
.wrapper:hover .mask {
  clip-path:  circle(100% at 50% 50%);
}
.wrapper:hover:after {
  border: 0;
  box-shadow: none;
}
.wrapper:after {
  content: ' ';
  display: block;
  position: relative;
  width: 160px;
  height: 160px;
  top: calc(-50% - 83px);
  left: calc(50% - 83px);
  border-radius: 50%;
  background:transparent;
  border: 3px solid #fff;
  box-shadow: 0px 0px 6px #aaa;
  pointer-events: none;
}

＆＃13;

<br/>
<br/>
<div class="wrapper">
  <div id="map-canvas" class="mask">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;