Beispiel:CSS-offset-path-2.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: #306f91;
    stroke-width: 1;
    fill: transparent;
   }  
 .path {
    offset-path: path('M300,120 c100,-140 150,140 200,0 s200,-100 200,0 s0,100 -100,100 h-200 s-150,00 -100,-100');
    animation: run 6s linear infinite;
  }
 .zwei {
    animation-delay: 0.5s;
  }  

.reifen {
  fill:black;	
  stroke: white;
  stroke-width: 1;
  }    

  @keyframes run {
    0% {
      offset-distance: 0;
    }
    to {
      offset-distance: 100%;
    }
  }
  
#hinweis {
  width: 90%;
}  

  </style>
  <title>Beispiel: Animationen entlang eines Pfades - 2</title>
</head>
 
<body>
  <h1>Animationen entlang eines Pfades mit offset-path und offset-distance</h1>
 
  <svg viewBox="0 0 900 300">
    <defs>
    <symbol id="auto">
      <path id="karosse" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z"/>
      <circle class="reifen" cx ="10" cy ="20" r ="5" /> 
      <circle class="reifen" cx ="32" cy ="20" r ="5" /> 
    </symbol>
    </defs>
	  
    <path class="bahn" d="M300,120 c100,-140 150,140 200,0 s200,-100 200,0 s0,100 -100,100 h-200 s-150,00 -100,-100 "/>
    <use xlink:href="#auto" class="path" x="0" y="-15" fill="#c32e04"/>
    <use xlink:href="#auto" class="path zwei" x="0" y="-15" fill="#dfac20"/>
  </svg>
    
  <div id="hinweis">
    <p>Das Beispiel funktioniert (Stand: Februar 2021) <b>nicht</b> im Safari.</p>
  </div>   

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-offset-path-2.html&oldid=77690“