Text wird geflutet |
So sieht´s aus |
HTML Knowhow
|
Quellcode |
<html>
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <style type="text/css"> .loading {font-weight: bold; font-size: 5em; text-align: center; height: 100px; line-height: 60px; vertical-align: bottom; position: relative;} .wave {background-image: url("../Bilder/gold.jpg"); -moz-background-clip: text; -o-background-clip: text; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0px 0px rgba(255, 255, 255, 0.06); animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate; background-size: 200px 100px; background-repeat: repeat-x; opacity: 1;} @keyframes wave-animation { 0% { background-position: 0 bottom; } 100% { background-position: 200px bottom; } } @keyframes loading-animation { 0% { background-size: 200px 0px; } 100% { background-size: 200px 200px; } } @media (min-width: 43px) { loading { font-size: 3em; } } </style> </head> <body > <div class="loading wave">HTML Knowhow</div> </body> </html> |
Kontakt Datenschutz Impressum | |