Codes
HTML:
<body>
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
CSS:
body,html,div,ul,li,footer{
margin:0;
padding:0;
}
body{
background:url("../bg.jpg");
/*使图片满屏*/
background-size:100%;
position: relative;
}
.container{
/*固定到屏幕底部*/
position: fixed;
bottom:0;
/**/
width: 100%;
height:70px;
background: rgba(244,244,244,0.5);
}
ul{
position: relative;
width:450px;
margin:0 auto;
}
li{
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-left:50px;
/*transition*/
-webkit-transition:-webkit-transform 0.3s linear 0s;
}
li:nth-child(1){
background:url("../1.png");
background-size:100%;
}
li:nth-child(2){
background:url("../2.png");
background-size:100%;
}
li:nth-child(3){
background:url("../4.png");
background-size:100%;
}
li:hover{
/*transform*/
-webkit-transform:translateY(-16px);
transform:translateY(-16px);
cursor:pointer;
}