diedVIPs

html knowhow

Schrift fliegt weg









Schrift fliegt weg

So sieht´s aus






HTML knowhow



Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
span {display: inline-block; font-size:3em; font-weight:bold; font-family: "Finger Paint"; text-shadow:0 0 0 whitesmoke; color:#008080; -webkit-animation: smoky 5s 3s both; animation: smoky 5s 3s both;}
span:nth-child(even) {-webkit-animation-name: smoky-mirror; animation-name: smoky-mirror;}
@-webkit-keyframes smoky {
60% { text-shadow: 0 0 40px whitesmoke; }
to { transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
@keyframes smoky {
60% { text-shadow: 0 0 40px whitesmoke; }
to { transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
@-webkit-keyframes smoky-mirror {
60% { text-shadow: 0 0 40px whitesmoke; }
to { transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
@keyframes smoky-mirror {
60% { text-shadow: 0 0 40px whitesmoke; }
to { transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
span:nth-of-type(1) { -webkit-animation-delay: 3.1s; animation-delay: 3.1s;}
span:nth-of-type(2) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s;}
span:nth-of-type(3) { -webkit-animation-delay: 3.3s; animation-delay: 3.3s;}
span:nth-of-type(4) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s;}
span:nth-of-type(5) { -webkit-animation-delay: 3.5s; animation-delay: 3.5s;}
span:nth-of-type(6) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s;}
span:nth-of-type(7) { -webkit-animation-delay: 3.7s; animation-delay: 3.7s;}
span:nth-of-type(8) { -webkit-animation-delay: 3.8s; animation-delay: 3.8s;}
span:nth-of-type(9) { -webkit-animation-delay: 3.9s; animation-delay: 3.9s;}
span:nth-of-type(10) { -webkit-animation-delay: 4s; animation-delay: 4s;}
span:nth-of-type(11) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s;}
span:nth-of-type(12) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s;}
span:nth-of-type(13) { -webkit-animation-delay: 4.3s; animation-delay: 4.3s;}
span:nth-of-type(14) { -webkit-animation-delay: 4.4s; animation-delay: 4.4s;}
span:nth-of-type(15) { -webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
span:nth-of-type(16) { -webkit-animation-delay: 4.6s; animation-delay: 4.6s;}
span:nth-of-type(17) { -webkit-animation-delay: 4.7s; animation-delay: 4.7s;}
span:nth-of-type(18) { -webkit-animation-delay: 4.8s; animation-delay: 4.8s;}
span:nth-of-type(19) { -webkit-animation-delay: 4.9s; animation-delay: 4.9s;}
span:nth-of-type(20) { -webkit-animation-delay: 5s; animation-delay: 5s;}
span:nth-of-type(21) { -webkit-animation-delay: 5.1s; animation-delay: 5.1s;}
</style>
</head>

<body>
<span>HTML</span>
<span>know&nbsp;how</span>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>

</html>








Kontakt Datenschutz Impressum