css3 内容掉落效果
2021-05-16 19:30
YPE html>
标签：seo over ext rom use col 内容 doctype position
.box{
float: left;
width: 155px;
height: 212px;
background-color: blue;
position: relative;
margin-left: 45%;
margin-top: 100px;
overflow: hidden;
}
.content{
position: absolute;
top: -212px;
width: 155px;
height: 212px;
transition: 1s;
text-align: center;
color: white;
background-color: red;
}
@keyframes tobottom{
from{
top:-212px;
}
to{
top:0px;
}
}
@keyframes tobottom2{
from{
top:0px;
}
to{
top:212px;
}
}
内容掉落
当然不是真的掉落了，只是子元素的top值发生了变化，超出了大盒子的范围被隐藏起来了。
var boxs=document.getElementsByClassName("box")
for(var i=0;i boxs[i].onmouseover=function(){ var x=this.children; x[0].style.animation="tobottom 1s forwards";//forwards停在动画最后的那个画面 } boxs[i].onmouseleave=function(){ var x=this.children; x[0].style.animation="tobottom2 1s"; } } css3 内容掉落效果 标签：seo over ext rom use col 内容 doctype position 原文地址：http://www.cnblogs.com/yangerfan/p/7746880.html