Buchstaben verschieben mit Animation |
So sieht´s aus |
H
T
M
L
k
n
o
w
h
o
w
|
Quellcode |
<html>
<head> <style type="text/css"> * {padding: 0; margin: 0; box-sizing: border-box;} #span {margin: 0 15px; color:#008080; font-size:2em; font-weight:bold; line-height: 1.5; text-shadow: 0 0 2px rgba(0, 0, 0, 0.45); animation: span 3s ease-in infinite alternate;} .main { display: flex; justify-content: center; align-items: flex-start;} @media (max-width: 600px) { .main { transform: scale(0.65); } } .letter {display: inline-flex; height: 50px; width: 20px; border: 2px solid green; border-radius: 20px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.75), inset 0 0 2px rgba(0, 0, 0, 0.45); animation: letter 3s ease-in-out infinite alternate;} @keyframes span { 0%, 30% { margin: 0 15px; } 70%, 100% { margin: 0 5px; } } @keyframes letter { 0%, 30% { width: 27px; } 70%, 100% { width: 30vw; } } </style> </head> <body> <div id="span" class="main"> <span>H</span> <span>T</span> <span>M</span> <span>L</span> <span class="letter"></span> <span>k</span> <span>n</span> <span>o</span> <span>w</span> <span>h</span> <span>o</span> <span>w</span> </div> </body> </html> |
Kontakt Datenschutz Impressum |