[CSS3 Practice] Simulate MacBook Dock

最新推荐文章于 2024-08-16 22:57:43 发布

LINJY6

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/linjiayuqazwsx/article/details/50428488

版权

CSS3 Practice 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;
}

Screenshot

这里写图片描述

LINJY6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS3 Practice] Simulate MacBook Dock

CodesHTML:<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
复制链接

扫一扫

专栏目录