css缩放样式案例

来源：互联网发布：淘宝开店起步编辑：程序博客网时间：2024/05/20 04:10

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css缩放样式</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:not('.li-bg')").mouseover(function(){
$("ul li.li-bg").removeClass("show").css({'left':$(this).position().left}).addClass("show");
});
});
</script>
<style type="text/css">
ul{
position:relative;
height:auto;
overflow:hidden;
}
ul, li{
margin:0px;
padding:0px;
list-style:none;
}
ul li{
width: 135px;
height: 160px;
line-height:100px;
float: left;
text-align:center;
position: relative;
z-index: 2;
}
ul li.li-bg{
position: absolute;
top: 0px;
left:0px;
width: 135px;
height: 100px;
background:red;
border-radius:0px;
z-index: 1;
}

/** 缩放动画 */
.show{
-webkit-animation:showout .3s ease-out both;
-moz-animation:showout .3s ease-out both;
-o-animation:showout .3s ease-out both;
animation-:showout .3s ease-out both;
}

@-webkit-keyframes showout {
0% { -webkit-transform: scale(0.5); opacity:0 }
100% { -webkit-transform: scale(1); opacity:1 }
}

@-moz-keyframes showout {
0% { -moz-transform: scale(0.5); opacity:0}
100% { -moz-transform: scale(1); opacity:1}
}

@keyframes showout {
0% {transform: scale(0.5); opacity:0 }
100% {transform: scale(1); opacity:1 }
}

</style>
</head>

<body>
<ul>
<li>标题一</li>
<li>标题一</li>
<li>标题一</li>
<li>标题一</li>
<li class="li-bg"></li>
</ul>

</body>
</html>

0 0