Beispiel:Shape-Morphing-6-Sonnenfinsternis.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>

svg { 

 width: 100%;
 height: 100vh;
 background: DeepSkyBlue;
 animation: sky 5s ease 1s infinite;

}

  1. sun {
 fill: #DBBB34;

}

  1. corona {
 opacity: 0;
 animation: corona 5s ease 1s infinite;

}

  1. moon-visible {
 fill: lightgray;
 opacity: .2;
 animation: moonrun 5s linear 1s infinite both;

}

  1. eclipse-shadow {
 fill: black;

}

  1. moon circle {
 animation: moonrun 5s linear 1s infinite both;

}

@keyframes sky { 

 0%,18% { background: DeepSkyBlue; }
 48%,65% { background: MidnightBlue; }
 88%,100% { background: DeepSkyBlue; }

}

@keyframes corona { 

 37% { opacity: 0; }
 45%,55% { opacity: .6; }
 63% { opacity: 0; }

}

@keyframes moonrun { 

 0% {
   transform: translateX(0px);
   animation-timing-function: ease-out;
 }

 45% {
   transform: translateX(340px);
 }

 55% {
   transform: translateX(340px);
   animation-timing-function: ease-in;
 }

 100% {
   transform: translateX(820px);
 }

} 

 </style>
 <title>Sonnenfinsternis</title>

</head>

<body> <svg viewBox="-100 -100 600 460"> <defs> 

 <radialGradient id="coronaGradient" cx="50%" cy="50%" r="50%">
   <stop offset="84%" stop-color="white" stop-opacity=".74"/>
   <stop offset="92%" stop-color="white" stop-opacity=".28"/>
   <stop offset="100%" stop-color="white" stop-opacity="0"/>
 </radialGradient>

</defs> 

 <mask id="moon" maskUnits="userSpaceOnUse">
   <rect x="-200" y="0" width="600" height="200" fill="white" />
   <circle cx="-240" cy="100" r="80" fill="black" />
 </mask>

 <circle id="moon-visible" cx="-240" cy="100" r="80" />

 <g id="corona" mask="url(#moon)">
   <circle cx="100" cy="100" r="96" fill="url(#coronaGradient)" />
 </g>

 <circle id="eclipse-shadow" cx="100" cy="100" r="80" />

 <g mask="url(#moon)">
   <circle id="sun" cx="100" cy="100" r="80" />
 </g>

</svg>

</body> </html>

Abgerufen am 11.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Shape-Morphing-6-Sonnenfinsternis.html"