純css3按鈕結合圖標懸停動畫特效



74 292 98



特效描述:純css3 按鈕結合圖標 懸停動畫特效,css3利用transform屬性制作按鈕和圖標通過鼠標懸停動畫切換效果代碼。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

2. HTML代碼

<div class="container">
  <h1>CSS3 按鈕懸停動畫</h1>
  <div class="button-effect">
    <h2>Effect #1</h2>
    <a class="effect effect-1" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-1" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-1" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-1" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-1" href="#" title="Learn More">Learn More</a>
  </div>
  <div class="button-effect">
    <h2>Effect #2</h2>
    <a class="effect effect-2" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-2" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-2" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-2" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-2" href="#" title="Learn More">Learn More</a>
  </div>
  <div class="button-effect">
    <h2>Effect #3</h2>
    <a class="effect effect-3" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-3" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-3" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-3" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-3" href="#" title="Learn More">Learn More</a>
  </div>
   <div class="button-effect">
    <h2>Effect #4</h2>
    <a class="effect effect-4" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-4" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-4" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-4" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-4" href="#" title="Learn More">Learn More</a>
  </div>
   <div class="button-effect">
    <h2>Effect #5</h2>
    <a class="effect effect-5" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-5" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-5" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-5" href="#" title="Learn More">Learn More</a>
    <a class="effect effect-5" href="#" title="Learn More">Learn More</a>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 加載動畫 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子