Buchstaben verschieben mit Animation |
So sieht´s aus |
H
T
L
M
k
n
o
w
h
o
w
-
i
s
t
-
C
O
O
L
|
Quellcode |
<html>
<head> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style type="text/css"> .words { color: green; font-family:Cambria; font-weight:bold; font-size: 2em; line-height: 2.5;} .words span { font-size: 3rem; display: inline-block; animation: move 3s ease-in-out infinite;} @keyframes move { 0% { transform: translate(-30%, 0); } 50% { text-shadow: 0 25px 50px black; } 100% { transform: translate(30%, 0); } } .words span:nth-child(2) { animation-delay: 0.5s;} .words span:nth-child(3) { animation-delay: 1s;} .words span:nth-child(4) { animation-delay: 1.5s;} .words span:nth-child(5) { animation-delay: 2s;} .words span:nth-child(6) { animation-delay: 2.5s;} .words span:nth-child(7) { animation-delay: 3s;} .words span:nth-child(8) { animation-delay: 3.5s;} .words span:nth-child(9) { animation-delay: 4s;} .words span:nth-child(10) { animation-delay: 4.5s;} .words span:nth-child(11) { animation-delay: 5s;} .words span:nth-child(12) { animation-delay: 5.5s;} .words span:nth-child(13) { animation-delay: 6s;} .words span:nth-child(14) { animation-delay: 6.5s;} .words span:nth-child(15) { animation-delay: 7s;} .words span:nth-child(16) { animation-delay: 7.5s;} .words span:nth-child(17) { animation-delay: 8s;} .words span:nth-child(18) { animation-delay: 8.5s;} .words span:nth-child(19) { animation-delay: 9s;} .words span:nth-child(20) { animation-delay: 9.5s;} </style> </head> <body> <div class="words word-1"> <span>H</span> <span>T</span> <span>L</span> <span>M</span> <span>k</span> <span>n</span> <span>o</span> <span>w</span> <span>h</span> <span>o</span> <span>w</span> <span>-</span> <span>i</span> <span>s</span> <span>t</span> <span>-</span> <span>C</span> <span>O</span> <span>O</span> <span>L</span> </div> </body> </html> |
Kontakt Datenschutz Impressum |