日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)建CSS3漂亮的動(dòng)畫菜單

使用CSS3可以打造出非常漂亮的導(dǎo)航效果，在今天的教程中我將創(chuàng)建菜單項(xiàng)懸停效果，很容易地通過編輯 css 文件進(jìn)行自定義，沒有使用任何圖像, 我會(huì)在水平和垂直位置的背景按鈕進(jìn)行動(dòng)畫處理。當(dāng)你把鼠標(biāo)移到菜單項(xiàng)的時(shí)間，將會(huì)涌現(xiàn)非常膩滑的滑動(dòng)結(jié)果，下面就一路來看看這個(gè)簡樸美麗的CSS3動(dòng)畫菜單吧。

房縣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

我希望這些 css3 菜單示例會(huì)派上用場(chǎng)也許你沒有靈感，創(chuàng)建您自己的導(dǎo)航菜單。(谷歌,火狐瀏覽器***),喜歡這個(gè)效果的話歡迎留言交流。

HTML CODE

菜單結(jié)構(gòu)是相當(dāng)簡單的。我們將使用一個(gè)無序的列表項(xiàng)。您可以使用它從谷歌的字體庫。此外可以瀏覽庫并選擇適合你的總體設(shè)計(jì)的其他字體。

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.                
  3. Home
    4.     
  
  
  
  4.                
  5. Services
    6.     
  
  
  
  6.                
  7. Gallery
    8.     
  
  
  
  8.                
  9. About
    10.     
  
  
  
  10.                
  11. Contact
    12.     
  
  
  
  12.             
    13.

CSS CODE

在下列示例中我將展示您為每個(gè)菜單應(yīng)用的樣式。

Example 1

***個(gè)示例中，我們將設(shè)置每個(gè)菜單項(xiàng)的背景寬度。寬度值會(huì) 0 表示處于正常狀態(tài)的元素，并賦予一個(gè) 50%在懸停狀態(tài)的值。根據(jù)您的需要，您可以更改此值。

 
 
 
 
      
  
  
  
  1. .demo1 li {  
    2.   
  
  
  
  2.      background-color: rgba(238, 238, 238, 1);  
    3.   
  
  
  
  3.      -webkit-transition: all 0.3s ease-in-out 0s;  
    4.   
  
  
  
  4.      -moz-transition: all 0.3s ease-in-out 0s;  
    5.   
  
  
  
  5.      -o-transition: all 0.3s ease-in-out 0s;  
    6.   
  
  
  
  6.      -ms-transition: all 0.3s ease-in-out 0s;  
    7.   
  
  
  
  7.      transition: all 0.3s ease-in-out 0s;  
    8.   
  
  
  
  8.      padding-left:1%;  
    9.   
  
  
  
  9.      height: 50px;  
    10.   
  
  
  
  10.      min-height: 50px;  
    11.   
  
  
  
  11.      width: 0;  
    12.   
  
  
  
  12.      font-family:"Oswald";  
    13.   
  
  
  
  13.      font-size:20px;  
    14.   
  
  
  
  14.  } 
    15.

padding-left屬性使您可以修改垂直寬度。

 
 
 
 
      
  
  
  
  1. .demo1 li:hover {  
    2.   
  
  
  
  2.      background-color: rgba(238, 238, 238, 1);  
    3.   
  
  
  
  3.      -webkit-transition: all 0.3s ease-in-out 0s;  
    4.   
  
  
  
  4.      -moz-transition: all 0.3s ease-in-out 0s;  
    5.   
  
  
  
  5.      -o-transition: all 0.3s ease-in-out 0s;  
    6.   
  
  
  
  6.      -ms-transition: all 0.3s ease-in-out 0s;  
    7.   
  
  
  
  7.      transition: all 0.3s ease-in-out 0s;  
    8.   
  
  
  
  8.      width:50%;  
    9.   
  
  
  
  9.  } 
    10.

Example 2

第二個(gè)例子是與***個(gè)非常相同。只更改背景。

 
 
 
 
      
  
  
  
  1. .demo2 {  
    2.   
  
  
  
  2.     background-color: rgba(179, 234, 255, 1);  
    3.   
  
  
  
  3.     width:50%;  
    4.   
  
  
  
  4. } 
    5.

Example 3

在此示例中在瀏覽器的頁的頂部，把高度屬性添加動(dòng)畫效果。若要?jiǎng)?chuàng)建一個(gè)色彩鮮艷的菜單，您可以為每個(gè)菜單項(xiàng)以不同的顏色。

 
 
 
 
      
  
  
  
  1. .demo3 li {  
    2.   
  
  
  
  2.      float:left;  
    3.   
  
  
  
  3.      background-color: rgba(90, 183, 60, 1);  
    4.   
  
  
  
  4.      -webkit-transition: all 0.3s ease-in-out 0s;  
    5.   
  
  
  
  5.      -moz-transition: all 0.3s ease-in-out 0s;  
    6.   
  
  
  
  6.      -o-transition: all 0.3s ease-in-out 0s;  
    7.   
  
  
  
  7.      -ms-transition: all 0.3s ease-in-out 0s;  
    8.   
  
  
  
  8.      transition: all 0.3s ease-in-out 0s;  
    9.   
  
  
  
  9.      height:0;  
    10.   
  
  
  
  10.      font-family:"Oswald";  
    11.   
  
  
  
  11.      font-size:20px;  
    12.   
  
  
  
  12.      padding:5px 0px 0px 0px;  
    13.   
  
  
  
  13.  }  
    14.   
  
  
  
  14.     
    15.   
  
  
  
  15.  .demo3 li:hover {  
    16.   
  
  
  
  16.      background-color: rgba(90, 183, 60, 1);  
    17.   
  
  
  
  17.      -webkit-transition: all 0.3s ease-in-out 0s;  
    18.   
  
  
  
  18.      -moz-transition: all 0.3s ease-in-out 0s;  
    19.   
  
  
  
  19.      -o-transition: all 0.3s ease-in-out 0s;  
    20.   
  
  
  
  20.      -ms-transition: all 0.3s ease-in-out 0s;  
    21.   
  
  
  
  21.      transition: all 0.3s ease-in-out 0s;  
    22.   
  
  
  
  22.      height:80px;  
    23.   
  
  
  
  23.  } 
    24.

Example 4

此示例中的結(jié)構(gòu)有點(diǎn)不同，因?yàn)槲覀儗⑹褂靡粋€(gè) div 作為專業(yè)的頁面動(dòng)畫布局。

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.                
  3. Home
 
  •                
  • Services
    •  
  •                
  • Gallery
    •  
  •                 
  •                 
    •  
  •          

    • 在 css 結(jié)構(gòu)中的重要屬性是吧他設(shè)置為隱藏

     
 
 
 
        
  
  
  
    1. .demo4 li {overflow: hidden;  
      2.   
  
  
  
    2.      float:left;  
      3.   
  
  
  
    3.      margin-left:20px;  
      4.   
  
  
  
    4.      font-family:"Oswald";  
      5.   
  
  
  
    5.      font-size:20px;  
      6.   
  
  
  
    6.      text-align:center;  
      7.   
  
  
  
    7.      background-color: rgba(255, 57, 57, 1);  
      8.   
  
  
  
    8.      width:120px;  
      9.   
  
  
  
    9.      height:60px;  
      10.   
  
  
  
    10.      position:relative;  
      11.   
  
  
  
    11.          color:#ffffff;  
      12.   
  
  
  
    12.  } 
      13.  
 
 

     
 
 
 
        
  
  
  
    1. .demo4 li .mask {  
      2.   
  
  
  
    2.      width:120px;  
      3.   
  
  
  
    3.      height:60px;  
      4.   
  
  
  
    4.      position: absolute;  
      5.   
  
  
  
    5.     
      6.   
  
  
  
    6.      top: -60px;  
      7.   
  
  
  
    7.      left: 0;  
      8.   
  
  
  
    8.      background-color: rgba(170, 0, 0, 1);  
      9.   
  
  
  
    9.      -webkit-transition: all 0.3s ease-in-out 0s;  
      10.   
  
  
  
    10.      -moz-transition: all 0.3s ease-in-out 0s;  
      11.   
  
  
  
    11.      -o-transition: all 0.3s ease-in-out 0s;  
      12.   
  
  
  
    12.      -ms-transition: all 0.3s ease-in-out 0s;  
      13.   
  
  
  
    13.      transition: all 0.3s ease-in-out 0s;  
      14.   
  
  
  
    14.      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  
      15.   
  
  
  
    15.      filter: alpha(opacity=0);  
      16.   
  
  
  
    16.      opacity: 0;  
      17.   
  
  
  
    17.      z-index:1;  
      18.   
  
  
  
    18.     
      19.   
  
  
  
    19.  }  
      20.   
  
  
  
    20.  .demo4 li:hover .mask {  
      21.   
  
  
  
    21.      
      22.   
  
  
  
    22.      top:0px;  
      23.   
  
  
  
    23.       -webkit-transform: translateY(0px);  
      24.   
  
  
  
    24.     -moz-transform: translateY(0px);  
      25.   
  
  
  
    25.     -o-transform: translateY(0px);  
      26.   
  
  
  
    26.     -ms-transform: translateY(0px);  
      27.   
  
  
  
    27.     transform: translateY(0px);  
      28.   
  
  
  
    28.     -webkit-transition-delay: 0s;  
      29.   
  
  
  
    29.     -moz-transition-delay: 0s;  
      30.   
  
  
  
    30.     -o-transition-delay: 0s;  
      31.   
  
  
  
    31.     -ms-transition-delay: 0s;  
      32.   
  
  
  
    32.     transition-delay: 0s;  
      33.   
  
  
  
    33.      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";  
      34.   
  
  
  
    34.     filter: alpha(opacity=1);  
      35.   
  
  
  
    35.     opacity: 1;  
      36.   
  
  
  
    36.  } 
      37.

    分享題目：創(chuàng)建CSS3漂亮的動(dòng)畫菜單
    標(biāo)題來源：http://www.dlmjj.cn/article/cogjeej.html