鼠標hover界面logo觸發放大動畫效果css樣式

在宣傳官網上普遍的動畫效果,就是鼠標hover觸發logo輕微變大

css代碼效果如下:

.featured-app-logo-wrapper{
	width:120px !important;
	height:120px !important;
	margin:10px !important;
	transition:transform .32s !important
}
.featured-app:hover .featured-app-logo-wrapper{
	transform:scale(1.1);
	transition-duration:.08s
}

.featured-app {
    display: inline-block !important;
    vertical-align: top !important;
    width: 140px !important;
    padding: 0 !important;
    color: #7c9398 !important;
    margin: 10px 20px !important;
}

.featured-app-logo {
    width: 100%;
}
img {
    opacity: 1;
    transition: opacity 0.3s;
}

html代碼如下:

<a href="/apps/dext" title="Dext" class="featured-app">
  <div class="featured-app-logo-wrapper">
    <img class="featured-app-logo" alt="Dext" src="/app-img/dext/dext-icon.png">
  </div>
  <div class="featured-app-name">Dext</div>
  <div class="featured-app-description" style="display:none;">JavaScript launcher</div>
  <div class="featured-app-keywords" style="display:none;">dext,launcher,search</div>
</a>

當在轉換變形時transform:scale(1.1);圖標放大效果顯示。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章