Presseffekt auf Bild mit css3

In meiner hybriden mobilen Anwendung habe ich mehrere Symbole und ich möchte einen Presseffekt reproduzieren, wenn ich auf ein Symbol klicke.Presseffekt auf Bild mit css3

HTML:

<div class="menuIcon" id="menuIcon"> 
     <img src="img/menu.svg" /> 
</div>

CSS:

.menuIcon { 
    width: 32px; 
    height: 32px; 
    position: absolute; 
    left: 20px; 
    top: 28px; 
} 

.menuIcon img { 
    width: 19px; 
    height: 19px; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

Die Presse Effekt, dass ich reproduzieren wollen, ist sichtbar in Twitter App: Sie können es hier sehen: https://vid.me/gub5

Quelle

2016-12-13 wawanopoulos

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –

Link funktioniert nicht – pradeep1991singh

Sie können th th. Lösen an wie diese, mit transform: scale und :active

.menuIcon { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 28px; 
 
} 
 
.menuIcon img { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.menuIcon img:active { 
 
    transform: scale(0.8); 
 
}

<div class="menuIcon" id="menuIcon"> 
 
     <img src="http://placehold.it/100" /> 
 
</div>

Quelle

2016-12-13 16:22:14 LGSon

Presseffekt auf Bild mit css3

Antwort

Verwandte Themen