Text fliegt weg und kommt wieder |
| So sieht´s aus |
H T M L K n o w h o w |
| Quellcode |
|
<html>
<head> <style type="text/css"> #span {color:green; font-size: 3em; font-family: open sans;} #span:nth-child(1) {animation: um 5s, cor 10s infinite; animation-fill-mode: forwards;} #span:nth-child(2) {animation: dois 5s, cor 10s infinite; animation-delay: 1s; position: relative; animation-fill-mode: forwards;} #span:nth-child(3) {animation: um 5s, cor 10s infinite; animation-delay: 2s; position: relative; animation-fill-mode: forwards;} #span:nth-child(4) {animation: um 5s, cor 10s infinite; animation-delay: 3s; position: relative; animation-fill-mode: forwards;} #span:nth-child(5) {animation: um 5s, cor 10s infinite; animation-delay: 3s; position: relative; animation-fill-mode: forwards;} #span:nth-child(6) {animation: um 5s, cor 10s infinite; animation-delay: 4s; position: relative; animation-fill-mode: forwards;} #span:nth-child(7) {animation: um 5s, cor 10s infinite; animation-delay: 4s; position: relative; animation-fill-mode: forwards;} #span:nth-child(8) {animation: um 5s, cor 10s infinite; animation-delay: 4s; position: relative; animation-fill-mode: forwards;} #span:nth-child(9) {animation: um 5s, cor 10s infinite; animation-delay: 6s; position: relative; animation-fill-mode: forwards;} #span:nth-child(10) {animation: um 5s, cor 10s infinite; animation-delay: 6s; position: relative; animation-fill-mode: forwards;} #span:nth-child(11) {animation: um 5s, cor 10s infinite; animation-delay: 4s; position: relative; animation-fill-mode: forwards;} #span:nth-child(12) {animation: um 5s, cor 10s infinite; animation-delay: 2s; position: relative; animation-fill-mode: forwards;} #span:nth-child(13) {animation: um 5s, cor 10s infinite; animation-delay: 1s; position: relative; animation-fill-mode: forwards; transform: rotate(180DEG);} @keyframes cor {from {color:#09f;} 10% {color: #2EDE10;} 30% {color: #3910DE;} 50% {color: #10DED4;} 70% {color:#D4DE10;} to {color: #E01B6A;} } @keyframes um {to {top: 50px; left: 400px;}} @keyframes dois {to {top: 50px; left: 403px;} } </style> </head> <body > <span id="span">H</span> <span id="span">T</span> <span id="span">M</span> <span id="span">L</span> <span id="span"></span> <span id="span">K</span> <span id="span">n</span> <span id="span">o</span> <span id="span">w</span> <span id="span">h</span> <span id="span">o</span> <span id="span">w</span> <span id="span"></span> </body> </html> |
Kontakt Datenschutz Impressum |