[Google Site] hover.css效果

A collection of CSS3 powered hover effects,如同官方網站所宣稱,是一組由css組成的效果,不必額外透過js的支援來讓網頁的物件移動,對GoogleSite來說當然是美事一樁,不必擔心Google更新,部分js不能使用,單純用css對程式碼的理解和維護也相對輕鬆。

可以從GitHub下載Hover.css、直接從上面複製部分css程式碼或是透過<link>也可以啦,三種方法各有千秋,下文要示範的是直接複製,算是對維護者來說比較保險、長久的作法。

  1. 首先,可以找三張你想要的圖片來做練習,因為會使用到htmlbox中css style的功能,所以可以把原先的style去掉,變成比較乾淨的格式。
  2. 到hover.css選一個你想要的效果,把它複製下來備用,例如你在demo站看到Grow這個效果,你可以到hover.css找到.hvr-grow,然後複製下來,這次的範例用的是.hvr-rotate。
  3. 在一開始的<div>中間加入 class="hvr-rotate",就可以使用hover.css的功能囉!
  4. ps.我的範例中class還有加入list-images,看官可以自行調整看是否有需要。

Original html Source
<div class="wrapper">
<div class="list-images hvr-rotate "><img class="hvr-float-shadow" border="0" src="https://lh3.googleusercontent.com/-XpfjBctq8qo/U37FoHU_NhI/AAAAAAAAQo4/Ljlc5uxBcYU/s400/P1230815.JPG" ></div>
<div class="list-images hvr-rotate"><img border="0" src="https://lh3.googleusercontent.com/-Gwtldcjx3M0/U31O5Ee3aOI/AAAAAAAAQnc/PO3yzYvBJGU/s400/P1160548.JPG" ></div>
<div class="list-images hvr-rotate"><img border="0" src="https://lh3.googleusercontent.com/-4M_ELsMBYsg/TnLTxRjGDDI/AAAAAAAAM-c/N8o0g7BxOTg/6.jpg" ></div>
</div>
<style type="text/css">
  .wrapper{
      width:100%;
      height: 350px;
      padding-top: 20px;
    }
  .list-images{
    display:block;
    float: left;
    padding: 8px;
    border: 1px solid #ddd;
    width:25%;
    margin-right: 3%;
  }
  .list-images img{
      width:100%;
    }
.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
</style>


這個網誌中的熱門文章

【Google Site】iframe簡單嵌入.swf

【Google Site】用html小工具做出marqueer效果