css html5卷轴动画

作者：夏雨芭蕉时间：2016-05-10 13:35:15 浏览量：

Image(6).png

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#demo1,#demo2{
     height:30px; width:100px; background-color:#930;
}
#img1{ height:0px; width:100px; background-image:url(1.jpg); background-repeat:no-repeat; background-size:100px 150px; background-position:0 0;
     animation:                    line-flash 2s linear 1s 1 forwards;
/*     -webkit-animation:            line-flash 2s linear 1s 1 normal;
     -moz-animation:               line-flash 2s linear 1s 1 normal;
     -o-animation:                 line-flash 2s linear 1s 1 normal;
     -ms-animation:                line-flash 2s linear 1s 1 normal;*/
}
/*@-webkit-keyframes line-flash {

}
@-moz-keyframes line-flash{

}
@-o-keyframes line-flash {}
@-ms-keyframes line-flash{}*/
@keyframes line-flash {
     0     { height:0; }
     100%{ height:150px;}
}

</style>
</head>

<body>
     <div id="demo1"></div>
     <div id="img1"></div>
     <div id="demo2"></div>

<style>
div.menu{
     margin:0;
     padding:0;
     width:250px;
     height:35px;
     border:1px solid gray;
     overflow:hidden;
     }
div.menu a{
     text-decoration:none;
     text-align:center;
     line-height:35px;
     font-size:21px;
     display:block;
     width:100%;
     height:35px;
     background:green;
     color:white;
     }
div.menu:hover{
     animation:showmenu 0.5s 1 forwards;
     }
@keyframes showmenu{
     100%{height:200px;}
}
</style>
<div class="menu">
<a href="#">全部分类</a>
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ul>
</body>

</html>

上一篇>>快捷方式

下一篇>>已经没有了