最近要模仿一個頁面，其中有一個效果就是三選單列變形為X 的效果，
效果如下：
圖（1）初始效果
圖（2）滑鼠懸浮效果
想法：
三橫的實現：傳統可以用3個span標籤來實現，但有一個更巧妙的方法，1個標籤就能實現三橫效果，根據張鑫旭大神分享的利用padding用一個標籤實現三的效果，大概原理是上中下橫線分別用border-top，背景，border-bottom。用background-clip：content-box剪裁，最後用padding上下撐開，實現三橫的視覺效果，
X的實現#：而變形的X也不需要額外的標籤，利用其自身after before偽類transform旋轉，偏移實作。需要耐心的調整角度。
要注意的是，用padding撐開實現三橫效果，觸發不太靈敏，最好用一個標籤包裹著icon標籤，在包裹層做：hover觸發
#下面是代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.icon{
width: 50px;
height: 10px;
padding: 10px 0;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
background: #000;
background-clip: content-box;
}
.fa{
cursor: pointer;
width: 50px;
height: 50px;
transition: .3s ease;
}
.fa:hover>.icon{
border: 0;
background: none;
}
.icon:before,.icon:after{
position: absolute;
content: "";
width: 60px;
height: 60px;
transition: .3s ease;
-webkit-transition: .3s ease;
opacity: 0;
}
.icon:before{
top: -5px;
border-bottom: 10px solid #000;
}
.icon:after{
top: 15px;
border-top: 10px solid #000;
}
.fa:hover>.icon:before{
opacity: 1;
transform: rotate(135deg) translateX(5px) translateY(-25px);
-webkit-transform: rotate(135deg) translateX(5px) translateY(-25px);
}
.fa:hover>.icon:after{
opacity: 1;
transform: rotate(-135deg) translateX(20px) translateY(39px);
-webkit-transform: rotate(-135deg) translateX(20px) translateY(39px);
}
</style>
</head>
<body>
<p class="fa">
<p class="icon"></p>
</p>
<script type="text/javascript">
</script>
</body>
</html>更多選單列「三」 變形為「X」css3過渡動畫詳解相關文章請關注PHP中文網！
#
