使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.
首先我们需要设计好DOCK栏结构,代码如下
代码名称
然后设置相关的展示效果CSS代码
代码名称
ul,li{
list-style: none;
}
ul{
margin: 0 auto;
width: 600px;
height: 300px;
background-color: #ff3300;
padding: 10px;
display: flex;
justify-content: center;
align-items: flex-end;
}
li{
display: inline-block;
margin: 5px;
}
li > a{
border: #eee 1px solid;
display: flex;
align-items: center;
justify-content: center;
widt