diedVIPs

html knowhow

Streifen ziehen sich durch Text







Streifen ziehen sich durch Text

So sieht´s aus


HTML Knowhow



Quellcode
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root { --stripe-size: 50px; --color1: orange; --color2: #008080; --duration: 2s;}
.stripe {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.stripe_inner {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 5em; text-align: center;
font-family: "Sigmar One", sans-serif; color: rgba(255, 255, 255, 0);
background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
background-size: var(--stripe-size) var(--stripe-size); -webkit-background-clip: text; background-clip: text;
-webkit-animation: stripeBackgroundPosition var(--duration) linear infinite; animation: stripeBackgroundPosition var(--duration) linear infinite;}
.stripe::before {content: ""; position: absolute; top: 0; left: 0; width: calc(100% + var(--stripe-size)); height: 100%;
background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size); -webkit-animation: stripeTransform var(--duration) linear infinite;
animation: stripeTransform var(--duration) linear infinite;}
.stripe::after {content: ""; position: absolute; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%);}
@-webkit-keyframes stripeTransform {
0% { transform: translateX(0);}
100% { transform: translateX(calc(var(--stripe-size) * -1)); }}
@keyframes stripeTransform {
0% { transform: translateX(0);}
100% { transform: translateX(calc(var(--stripe-size) * -1)); }}
@-webkit-keyframes stripeBackgroundPosition {
0% { background-position: 0 0; }
100% { background-position: calc(var(--stripe-size) * -1) 0; }}
@keyframes stripeBackgroundPosition {
0% { background-position: 0 0; }
100% { background-position: calc(var(--stripe-size) * -1) 0; }}
</style>
</head>

<body>
 <div class="stripe_inner">HTML Knowhow</div>
</body>

</html>





Kontakt    Datenschutz    Impressum