diedVIPs

html knowhow

Text fliegt weg und kommt wieder










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