最近要模仿一個頁面，其中有一個效果就是 三 菜單欄 變形為 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> <div class="fa"> <div class="icon"></div> </div> <script type="text/javascript"> </script></body></html> |
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持錯新站長站！
新聞熱點
疑難解答
