Beispiel:SVG-Rube-Goldberg-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Schiefe Ebene</title>
  <style> 
svg {
 // animation-duration: 0.2s;
 // animation-delay: 0.1s;

}


@keyframes roll {
    0% {transform: translate(0,0);}
   75% {transform: translate(600px,-200px);}
  100% {transform: translate(0,0);}
}
      
.wood {
  fill: #996600;	
  stroke: #663300;
  stroke-width: 2;
}
circle {
  fill: #337599;
    stroke: black;
  stroke-width: 2;
    animation: roll 5s infinite ease-in;	
}
    </style>
</head>
<body>

<h1>Schiefe Ebene</h1>

<svg width="800" height="600" viewBox="0 0 800 600">

    <path id="ramp" class="wood" d="M40,300 h600 v-200 z" />

    <circle id="ballBlue" cx="30" cy="270" r="30" />

</svg>
</body>
</html
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Rube-Goldberg-2.html&oldid=81285“