菜單欄 “三” 變形為“X”css3過渡動畫

發(fā)布時間：2017-02-28 16:55:15 作者：lingwer111

我要評論

本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動畫的實現(xiàn)方法。具有很好的參考價值，下面跟著小編一起來看下吧

最近要模仿一個頁面，其中有一個效果就是三菜單欄變形為 X 的效果，

效果如下：

圖（1）初始效果

圖（2）鼠標懸浮效果

思路：

三橫的實現(xiàn)：傳統(tǒng)可以用3個span標簽來實現(xiàn)，但有一個更加巧妙的方法，1個標簽就能實現(xiàn)三橫效果，根據(jù)張鑫旭大神分享的利用padding用一個標簽實現(xiàn) 三的效果，大概原理是上中下橫線分別用 border-top，背景，border-bottom。用background-clip：content-box剪裁，最后用padding上下?lián)伍_，實現(xiàn)三橫的視覺效果，

X的實現(xiàn)：而變形的X也不需要額外的標簽，利用其自身after before偽類 transform旋轉(zhuǎn)，偏移實現(xiàn)。需要耐心的調(diào)整角度。

要注意的是，用padding撐開實現(xiàn)三橫效果，觸發(fā)不太靈敏，最好用一個標簽包裹著icon標簽，在包裹層做：hover觸發(fā)

下面是代碼

<!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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！