* {
margin:0;
padding:0;
list-style:none;
}
body {
background-color:#999;
}
ul {
width:900px;
margin:100px auto;
height:80px;
position:relative;
}
ul::after,ul::before {
content:"";
position:absolute;
width:100px;
height:80px;
background-color:#ccc;
left:-100px;
}
ul::after {
/* left 设置auto,左边的left 属性 不在控制 left 值 */
left:auto;
right:-100px;
}
ul li {
float:left;
width:180px;
height:80px;
}
ul li span {
float:left;
height:80px;
}
ul li .left,ul li .right {
width:30px;
height:100%;
background-color:#ccc;
}
ul li .center {
width:120px;
height:80px;
background-color:#ccc;
text-align:center;
line-height:80px;
font-size:24px;
font-family:"Microsoft Yahei";
}
ul li:hover .left {
transform-origin:left;
transform:skew(0deg,-30deg);
background-color:#c1c1c1;
box-shadow:10px 20px 20px -10px #666;
}
ul li:hover .center {
transform:translateY(-17px);
text-shadow:5px 5px 3px #666;
box-shadow:0 20px 20px -10px #666;
}
ul li:hover .right {
transform-origin:right;
transform:skew(0deg,30deg);
background-color:#c1c1c1;
box-shadow:-10px 20px 20px -10px #666;
}