<!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>
鼠標經過的時候有一個翻轉效果：
感覺還是自動的看起來高大上一點，這個得鼠標移動上去纔有效果，這篇是在逛博客的時候，看到的一個小案例，已經不記得是哪位大俠的博客了，大俠勿怪。