Beispiel:Offset-path-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1.0">
 <title>Pfad-Animation - 2</title>
   <style>
 #flight, #label {
   offset-path: path('m100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 c48,134,-100,226,-200,226 l-400,0 c-124,0,-252,-116,-200,-200 z');
   animation: fly 8s linear infinite;
 }

#flight { offset-anchor: 5% 5%; } 

 #label {
   position: absolute;
   top: 0;
   left: 0;

offset-anchor: center -9em; 

   background: rgb (255 255 255 /0.6);
   padding: 0.2em 0.5em;

border: thin solid; 

   border-radius: 0.2em;
 }

/* when checkbox is checked, keep label upright */

  1. rotate:checked ~ #label {
 offset-rotate: 0deg;

}

/* optional: change label text via spans */ label.trigger .auto { display: inline; } label.trigger .null { display: none; }

  1. rotate:checked + label.trigger .auto { display: none; }
  2. rotate:checked + label.trigger .null { display: inline; } 
 @keyframes fly {
   0% { offset-distance: 0; }
   100% { offset-distance: 100%; }
 }

 .path {
   stroke: #74943a;
   stroke-width: 1;
   stroke-dasharray: 4;
   fill: transparent;
 }	

 body {
   position: relative;

max-width: 60em; 

}

   </style>

</head> <body>

Pfad-Animation - 2
offset-rotate und offset-anchor

<input type="checkbox" id="rotate" > <label for="go" class="trigger"> offset-rotate: auto offset-rotate: 0deg; </label>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 600"> 

 <defs>
   <symbol id="plane">
     <path d="M 55.4 24.2 L 43.4 24.2 L 37 14.2 C 38.9 13.9 42.5 12.7 42.5 10.6 C 42.5 8.5 37.6 7 36.1 7 L 32.1 7 L 27.5 0 L 18.9 0 L 21.4 7 L 21.1 7 L 21.1 14.2 L 24.2 14.2 L 27.8 24.2 L 11.6 24.2 L 4.9 17.5 L 0 17.5 L 5.8 27.3 L 5.8 35 L 0 44.8 L 4.9 44.8 L 11.6 38.1 L 27.8 38.1 L 24.2 47.8 L 21.1 47.8 L 21.1 55 L 21.4 55 L 18.9 62 L 27.8 62 L 32.5 55 L 36.4 55 C 37.9 55 42.8 53.5 42.8 51.4 C 42.8 49.6 39.2 48.1 37.3 47.8 L 43.7 37.8 L 55.6 37.8 C 59.6 37.8 74 35 74 30.8 C 73.7 27 59.3 24.2 55.4 24.2 Z"/>

<circle cx="37" cy="31" r="3" fill="red" /> 

   </symbol>
 </defs>

 <path class="path" d="m100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 c48,134,-100,226,-200,226 l-400,0 c-124,0,-252,-116,-200,-200 z"/>


<use href="#plane" id="flight" fill="steelBlue"/>

</svg>

Flug 707
Honolulu-Tahiti

</body> </html>

Abgerufen am 21.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Offset-path-2.html"