Beispiel:CSS3 filter-animiert-2.html
Aus SELFHTML-Wiki
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>glow-Animation mit CSS</title>
<style>
svg {
background: #000;
}
.line {
fill: none;
stroke-width:15;
stroke: hotpink;
stroke-dasharray:0;
stroke-dashoffset:0;
}
.svg-shadow {
animation: svg-shadow 2s infinite alternate;
}
@keyframes svg-shadow {
from {
filter: drop-shadow( 0 0 0 #fff) drop-shadow( 0 0 0 #e60073) drop-shadow( 0 0 0 #e60073);
}
to {
filter: drop-shadow( 0 0 20px #fff) drop-shadow( 0 0 25px #e60073) drop-shadow( 0 0 40px #e60073);
}
}
</style>
</head>
<body>
<h1> glow-Animation mit CSS</h1>
<svg viewBox="0 0 900 600">
<g id="sinus">
<path class="line svg-shadow" d="M50,100 q100,-100 200,0 t200,0 t200,0 t200,0"/>
</g>
<path class="line svg-shadow" d="M50,250 h600" />
</svg>
</body>
</html>
