<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test-container">
<ul>
<li >
<span class="left"></span>
<span class="middle">往后余生</span>
<span class="right"></span>
</li>
<li >
<span class="left"></span>
<span class="middle">风雪是你</span>
<span class="right"></span>
</li>
<li >
<span class="left"></span>
<span class="middle">平淡是你</span>
<span class="right"></span>
</li>
<li >
<span class="left"></span>
<span class="middle">清平也是你</span>
<span class="right"></span>
</li>
</ul>
</div>
<style lang="scss" >
.test-container{
background-color: #eee;
width: 820px;
}
ul{
padding: 0;
list-style-type: none;
width: 820px;
height: 60px;
margin: 100px auto;
}
ul::before,ul::after{
content: '';
width: 50px;
height: 60px;
background-color: #ccc;
display: inline-block;
}
ul::before{
float: left;
}
ul::after{
float:right ;
}
li{
float:left;
width: 180px;
height: 100%;
position: relative;
cursor: pointer;
}
li .left,li .right{
width: 30px;
height: 100%;
background-color: #ccc;
position: absolute;
}
li .left{
left: 0;
}
li:hover .left{
/*以左侧为中心 倾斜*/
transform-origin: left;
/*skew(x,y)逆时针倾斜30度,正顺，负逆*/
transform:skew(0deg,-30deg);
}
li .right{
right: 0;
}
li:hover .right{
transform-origin: right;
transform: skew(0,30deg);
}
li .middle{
width: 120px;
height: 100%;
text-align: center;
line-height: 60px;
position: absolute;
left: 30px;
background-color: #ccc;
font-size: 22px;
font-family: "华文行楷";
}
li:hover .middle{
transform: translateY(-17.3px);
text-shadow: 4px 4px 4px #333;
box-shadow: 0 8px 20px -3px #333;
text-shadow: 0px 3px 1px rgb(248, 209, 209);
}
</style>
</body>
</html>
鼠标经过的时候有一个翻转效果：
感觉还是自动的看起来高大上一点，这个得鼠标移动上去才有效果，这篇是在逛博客的时候，看到的一个小案例，已经不记得是哪位大侠的博客了，大侠勿怪。