菜單欄 “三” 變形為“X”css3過(guò)渡動(dòng)畫(huà)

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

我要評(píng)論

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

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

效果如下：

圖（1）初始效果

圖（2）鼠標(biāo)懸浮效果

思路：

三橫的實(shí)現(xiàn)：傳統(tǒng)可以用3個(gè)span標(biāo)簽來(lái)實(shí)現(xiàn)，但有一個(gè)更加巧妙的方法，1個(gè)標(biāo)簽就能實(shí)現(xiàn)三橫效果，根據(jù)張?chǎng)涡翊笊穹窒淼睦胮adding用一個(gè)標(biāo)簽實(shí)現(xiàn) 三的效果，大概原理是上中下橫線(xiàn)分別用 border-top，背景，border-bottom。用background-clip：content-box剪裁，最后用padding上下?lián)伍_(kāi)，實(shí)現(xiàn)三橫的視覺(jué)效果，

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

要注意的是，用padding撐開(kāi)實(shí)現(xiàn)三橫效果，觸發(fā)不太靈敏，最好用一個(gè)標(biāo)簽包裹著icon標(biāo)簽，在包裹層做：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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！