欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

菜單欄 “三” 變形為“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í)也希望多多支持腳本之家!

相關(guān)文章

最新評(píng)論