主页 / 问题 / 1139263
Accepted
ref21
Asked:2020-06-10 22:02:30 +0000 UTC2020-06-10 22:02:30 +0000 UTC

如何进行这样的悬停？

  • 772

徘徊

如何进行这样的悬停？最难理解的部分是悬停移除时黑块行为的实现

css

1 个回答

  1. Best Answer

    我认为这对于纯 CSS 是不可能的。这是 css-animation + jquery 选项：

    $('.block').hover(function(){	
  $('.fon').addClass('grow').removeClass('reduce');
}, function(){
  $('.fon').addClass('reduce').removeClass('grow');
});
    .block {
  width: 200px;
  height: 150px;
  border: 1px solid red;
  margin: 30px;
  position: relative;
}
.fon {
  width: 0;
  height: 0;
  background-color: rgba(0,0,0,.7);
  position: absolute;
  bottom: 0;
  left: 0;
}
@keyframes grow {
  0% { width: 0; height: 0; }
  50% { width: 50%; height: 25%; }
  100% { width: 100%; height: 100% }
}
@keyframes reduce {
  0% { width: 100%; height: 100%; }
  50% { width: 50%; height: 75%; }
  100% { width: 0; height: 0 }
}
.fon.grow {
  animation: grow 0.3s linear forwards;
}
.fon.reduce {
  animation: reduce 0.3s linear forwards;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <div class="fon"></div>
</div>

    • 2

相关问题