Animace po najetí na odkaz Asi by nebylo vhodné používat toto na všechny odkazy na webu, ale na nějaké úvodní se určitě hodí:   Kód: <style>.odkaz { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transition: transform 0.4s; -webkit-transition: -webkit-transform 0.4s } .odkaz:hover { transform: rotateX(360deg);  -webkit-transform: rotateX(360deg); }</style> <a class=“odkaz“ href=“adresa odkazu„> text odkazu </a> Ukázka: HTML Kody

3D přechod pro obrázek Tento efektní 3D přechod je tvořen pomocí CSS3 a javascriptu a může zdobit i váš web:     Kód: <style> @keyframes obrazky { from {transform: rotateY(0deg);-webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) } } @-webkit-keyframes obrazky { from {transform: rotateY(0deg);-webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) }…

CSS3 načítací lišta Pravděpodobně při nějakém skriptu se bude hodit tato CSS3 načítací lišta:   Kód: <style> .view_port { background-color:black; height:25px; width:100%; overflow: hidden;}.cylon_eye { color:white; height: 100%; width: 20%; background-color: red; background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); -webkit-animation: move_eye 4s linear 0s infinite alternate; animation:…

Plynule se měnící obrázky Pomocí jednoduché CSS3 vychytávky, kdy obrázky považujeme za pozadí, a trochu JavaScriptu můžeme utvořit jednoduchou přehlídku obrázků.   Kód: <style>.obrazky { width: 500px;height: 500px; background-position: center center; background-repeat: no-repeat; transition: background-image 0.6s; -webkit-transition: background-image 0.6s }</style> <script>var num=1; setInterval(function() { num++; switch(num) { case 1: obdiv.style.backgroundImage=’url(„URL prvního obrázku„)‘; break; case 2:…

3D točící se ikonka Vypadá to trochu jednoduše, ale i tato CSS3 ikonka může uvítat návštěvníky vašeho webu:   Kód: <style>@keyframes vitejte { from { transform: rotateY(0deg); -webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) } } @-webkit-keyframes vitejte { from { transform: rotateY(0deg); -webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) } }  .vitejte { animation:…

CSS3 uvítání na webu – točící ikonka Tato sympatická CSS3 animace musí nadchnout úplně každého, tedy i návštěvníky vašeho webu:   Kód: <style>@keyframes vitejte { from { transform: rotate(0deg); -webkit-transform: rotate(0deg) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg) } } @-webkit-keyframes vitejte { from { transform: rotate(0deg); -webkit-transform: rotate(0deg) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg) } }  .vitejte…

CSS3 uvítání na webu – jemně blikající ikonka I takováto elegantní ikonka se dá vytvořit pomocí CSS3 animací. Pokud naopak chcete, aby bila návštěvníka do očí, stačí snížit čas průběhu animace ve zvýrazněných částech kódu:   Kód: <style>@keyframes vitejte { 0%{ background-color: #f8a263; } 50% {background-color: #2ea2cc;} 100% { background-color: #f8a263; } } @-webkit-keyframes vitejte { 0%{ background-color: #f8a263; } 50% {background-color: #2ea2cc;} 100% { background-color:…

Náhled textu Pokud napíšete do políčka nějakou dlouhou větu, zobrazí se jen jení část, dokud nenajedete myší na text.   Kód: <style>.schtext { width: 50px;white-space: nowrap;overflow: hidden;transition: width 0.8s;}  .schtext:hover { width:100% }</style> <div class=“schtext“>Hrozně dlouhý text, který se schoval</div> Ukázka: Hrozně dlouhý text, který se schoval

Blikající text Tento text bude elegantně blikat, a to pomocí CSS3 animace:   Kód: <style>.blikej { animation: blik 4s infinite; -webkit-animation: blik 4s infinite } @keyframes blik { 0% { opacity:1 } 50% { opacity:0 } 100% { opacity:1 } } @-webkit-keyframes blik { 0% { opacity:1 } 50% { opacity:0 } 100% { opacity:1 } }…

Obrázek, který se zvětší Užitečné třeba pro galerii, tento obrázek se po najetí na něj zvětší:   Kód: <style>.zvetsit { transition:all 0.3s; width:100px; height:100px } .zvetsit:hover { width: 120px;height:120px}</style> <img class=“zvetsit“ src=““> Ukázka: