iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

30天學習30套前端技術(2018年)系列 第 21

[十分鐘學習] Hover.css - 強化系游標移入動畫效果

example1

多項針對連結、按鈕、Logo、SVG和圖片的移入CSS3特效,非常容易導入進去

GitHub Star: 18,000
Javascripting Overall: 85%
瀏覽器: ChromeFirefoxIE10+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- Font Awesome v4.7.0 -->
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
      <!-- Hover.css v2.1.1 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" rel="stylesheet" />
    
  • npm

      $ npm install hover.css --save
    
  • Bower

      $ bower install hover --save
    

《範例》

  • 連結活潑化

      <!-- 
      	效果類別(列表[註1])
      	hvr-grow: 膨脹
      -->
      <a href="#" class="hvr-grow">...</a>
    

    [註1]

    類別 描述
    hvr-grow 膨脹
    hvr-shrink 收縮
    hvr-pulse 心跳
    hvr-pulse-grow 心跳膨脹
    hvr-pulse-shrink 心跳收縮
    hvr-push
    hvr-pop
    hvr-bounce-in 反彈
    hvr-bounce-out 彈跳
    hvr-rotate 旋轉
    hvr-grow-rotate 旋轉(幅度增加)
    hvr-float 上升
    hvr-sink 下沉
    hvr-bob 漂浮
    hvr-hang 流沙
    hvr-skew 傾斜
    hvr-skew-forward 往前傾斜
    hvr-skew-backward 往後傾斜
    hvr-wobble-horizontal 水平搖擺
    hvr-wobble-vertical 垂直搖擺
    hvr-wobble-to-bottom-right 往右下搖擺
    hvr-wobble-to-top-right 往右上搖擺
    hvr-wobble-top 頭部搖擺
    hvr-wobble-bottom 底部搖擺
    hvr-wobble-skew 傾斜搖擺
    hvr-buzz 噪音
    hvr-buzz-out 噪音(一次)
    hvr-forward 往前
    hvr-backward 往後

《延伸》

  1. Hover.css | Ian Lunn - WordPress & Front-end Developer
  2. Hover.css - A collection of CSS3 powered hover effects

上一篇
[十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它
下一篇
[十分鐘學習] iScroll - 3秒變成iPhone,模擬拖曳反彈(bounds)神器
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言