diedVIPs

html knowhow

Text wird geflutet










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