xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS hover box

transition 踩坑指南, display: none; 作为初始状态，不会产生动画效果，必须设置 height: 0; 或 0; 来实现隐藏!

transition

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
   50vw;
  margin: 0 auto;
  background: #fff;
  border: 1px solid red;
  padding: 10px;
}
ul>li {
  list-style: none;
   100px;
  height: 30px;
  background: #ccc;
  color: #0f0;
  text-align: center;
  /* text-decoration: underline; */
}

a{
  text-decoration: none;
}

.link {
  color: #f0f;
}

.link:hover{
  color: #0f0;
}

.link + .hover-box,
.hover-box {
  position: fixed;
  display: block;
  /* display: none; */
  /* visibility: hidden; */
  height: 0;
   calc(100vw);
  background: #000;
  color: #fff;
  top: 80px;
  left: 0;
  right: 0;
  /* margin-top: 100px; */
  overflow: hidden;
  margin: 0;
  padding: 0;
  // transition: height 2s .5s ease-in-out;
  transition: height 2s .5s ease-out;
}
/* .hover-box > p {
  height: 0;
} */



.link:hover + .hover-box,
.hover-box:hover {
  transition: height 2s .5s ease-in;
  height: 200px;
  // animation: hover-animation 2s .5s ease-in-out;
  // padding: 30px;
  // transition: 
  //   height 2s .5s ease-in-out, 
  //   padding-top 2s .5s ease-in-out,
  //   padding-bottom 2s .5s ease-in-out;
}

/* .hover-box:hover > p {
  height: auto;
} */

/* .link:hover + .hover-box,
.hover-box:hover {
   calc(100vw);
  height: 200px;
  background: #000;
  transition: height 1s .5s ease-in-out;
  color: #fff;
  padding: 30px;
} */

  /* animation: 2s linear hover-animation 1s; */
  /* animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state. */

@keyframes hover-animation {
  0% {
    height: 0px;
  }
  25% {
    height: 25px;
  }
  50% {
    height: 50px;
  }
  75% {
    height: 75px;
  }
  100% {
    height: 100px;
  }
}

demo

animate.css

https://animate.style/

https://github.com/animate-css/animate.css

refs

https://codepen.io/xgqfrms/pen/NWRaXoN

https://codepen.io/xgqfrms/pen/LYRzqZq

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---