Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<span class="prvni" style="z-index:50;position:relative;left:100px">Test</span><span class="druhy">Test</span>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
span {font-size:50px;line-height:100px;text-align:center;display:inline-block;height:100px;width:100px;transition:all 1s; } .druhy { background:darkred; border-left:3px solid black; -webkit-animation: anim1 5s linear; -webkit-animation-iteration-count:infinite; } .prvni { background:darkgreen; -webkit-animation: anim2 5s linear; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes anim1{ 0%,100% { -webkit-transform-origin:right; -webkit-transform: rotateY(0deg);} 50% { -webkit-transform-origin:right; -webkit-transform: rotateY(90deg);} } @-webkit-keyframes anim2{ 0%,100% { -webkit-transform-origin:left; -webkit-transform: rotateY(90deg);} 50% { -webkit-transform-origin:left; -webkit-transform: rotateY(0deg);} }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>