Question

我有一个div，当我徘徊在这个div中时，应该出现三个圆圈，我想要一个动画将它应用到那些圆圈，当它们看起来像弹出或类似的东西，以使效果看起来很好，当它们出现时，如何我可以做吗？这是我的代码：

＆＃13;

.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
}

.circles{
list-style: none;
display: none;
}

.circles li{
margin-top: 10px;
}

.hoverover:hover + .circles{
display: inline-block
}

＆＃13;

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>

＆＃13;

Answer 1

使用animation，opacity和transform: scale()

效果如下

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
}

.circles li {
  margin-top: 10px;
}

.hoverover:hover + .circles .circle {
  animation: popin .25s forwards;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

制作圆圈的动画以很好的方式出现

1 个答案: