Link demó
Először is, ezt kell bemásolnunk a CSS-be /hamarosan szómagyarázattal/
/* Buzz */
@-webkit-keyframes hvr-buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
@keyframes hvr-buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
.hvr-buzz {
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;
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
-webkit-animation-name: hvr-buzz;
animation-name: hvr-buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
|
|
|
Ezután ezt a kódot kell minden linkelésnél beilleszteni a forráskódunkba, hogyha szeretnénk, hogy így jelenjen meg.
Szövegnél ez kell a forráskódba:
<a href="ide jön a link" class="hvr-buzz">Linknek a szövege</a>
|
|
|
Képnél ez kell a forráskódba:
<a href="ide jön a link" class="hvr-buzz">ide csak írj valamit</a>
|
|
|
Miután ezt beillesztetted, láthatod, hogy ugyanúgy egy szöveget ad ki. Csak jelöld ki a szöveget, utána fölül látod ezt az ikont, kattints rá, írd be a képed URL-jét, és elméletileg a szöveget már ki is cserélte rá! Mégegyszer azért ellenőrízheted, hogy a link jó-e, ha nem akkor nem kell belemenned a forráskódba, simán a linkelésnél is áttudod írni.
forrás
Ez a tutorial magyarosítása, és egyszerűsítése, természetesen nem én találtam ki, följebb megtalálható a forrás!
|