CSS hover box
CSS hover box
transition 踩坑指南, display: none; 作为初始状态,不会产生动画效果,必须设置 height: 0; 或 width: 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;
width: 50vw;
margin: 0 auto;
background: #fff;
border: 1px solid red;
padding: 10px;
}
ul>li {
list-style: none;
width: 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;
width: 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 {
width: 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://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 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14180734.html
未经授权禁止转载,违者必究!