css3 内容掉落效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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;
}
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h2>内容掉落</h2>
<p>当然不是真的掉落了，只是子元素的top值发生了变化，超出了大盒子的范围被隐藏起来了。</p>
</div>
</div>
</body>
<script type="text/javascript">
var boxs=document.getElementsByClassName("box")
for(var i=0;i<boxs.length;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";
}
}
</script>
</html>
