Beispiel:CSS-offset-path-1.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">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
  .bahn {
    stroke: #337599;
    stroke-width: 1;
    fill: none;
   }  
 .path {
    offset-path: path('M 300,100 h 300 v 100 h-300 z');
    animation: run 6s linear infinite;
  }

 .reverse {
    offset-path: path('M 300,100 h 300 v 100 h-300 z');
    animation: run 6s linear reverse infinite;
  }

  .circle {
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
  }

  .circle:after {
    content: '';
    display: block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #dfac20;
  }

  @keyframes run {
    0% {
      offset-distance: 0;
    }
    to {
      offset-distance: 100%;
    }
  }

#hinweis {
width: 90%;
}
  </style>
  <title>Beispiel: Animationen entlang eines Pfades - 1</title>
</head>
 
<body>
  <h1>Animationen entlang eines Pfades mit offset-path</h1>
 
  
  <div class="circle path"></div>

    <svg viewBox="0 0 900 400">
	  <path class="bahn" d="M 300,100 h 300 v 100 h -300 z"/>
      <circle stroke="black" class="reverse" r="1em" cx="1em" cy"1em" fill="#c32e04" />
    </svg>

  <div id="hinweis">
    <p>Das Beispiel funktioniert (Stand: Februar 2021) <b>nicht</b> im Safari.</p>
    <p><b>Beachten Sie</b>: Durch die abrupten 90°-Winkel erscheint die Animation ruckartig - in der nächsten Animation verläuft die Bahn nur in Kurven und Bögen.</p>
  </div>
  
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-offset-path-1.html&oldid=78304“