在宣传官网上普遍的动画效果,就是鼠标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);图标放大效果显示。