Digitale Werkzeuge in der Schule/Mathematik trifft Klassenparty/Verhaeltnis: Unterschied zwischen den Versionen
Aus ZUM Projektwiki
Keine Bearbeitungszusammenfassung Markierungen: Manuelle Zurücksetzung Quelltext-Bearbeitung 2017 |
Keine Bearbeitungszusammenfassung Markierung: Quelltext-Bearbeitung 2017 |
||
| Zeile 43: | Zeile 43: | ||
</div> | </div> | ||
<p style="font-size: 90%;">Oben: Kirschsaft (60%)<br>Unten: Bananensaft (40%)</p> | <p style="font-size: 90%;">Oben: Kirschsaft (60%)<br>Unten: Bananensaft (40%)</p> | ||
<style> | |||
@keyframes fillRed { | |||
0% { height: 0%; } | |||
100% { height: 40%; } | |||
} | |||
@keyframes fillYellow { | |||
0% { height: 0%; } | |||
100% { height: 60%; } | |||
} | |||
.glas { | |||
width: 100px; | |||
height: 150px; | |||
border: 2px solid #555; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
position: relative; | |||
} | |||
.flüssigkeit-rot { | |||
background-color: #ff6666; | |||
width: 100%; | |||
position: absolute; | |||
bottom: 0; | |||
animation: fillRed 2s ease-out forwards; | |||
animation-delay: 0s; | |||
} | |||
.flüssigkeit-gelb { | |||
background-color: #ffff66; | |||
width: 100%; | |||
position: absolute; | |||
bottom: 40%; | |||
animation: fillYellow 2s ease-out forwards; | |||
animation-delay: 2s; | |||
} | |||
</style> | |||
<div class="glas"> | |||
<div class="flüssigkeit-rot" style="height: 0%;"></div> | |||
<div class="flüssigkeit-gelb" style="height: 0%;"></div> | |||
</div> | |||
<p style="font-size: 90%;">Kirschsaft und Bananensaft werden ins Glas gegossen.</p> | |||
Version vom 23. April 2025, 18:07 Uhr
Diese Seite befindet sich aktuell im Aufbau.au.
Oben: Kirschsaft (60%)
Unten: Bananensaft (40%)
<style> @keyframes fillRed {
0% { height: 0%; }
100% { height: 40%; }
} @keyframes fillYellow {
0% { height: 0%; }
100% { height: 60%; }
} .glas {
width: 100px; height: 150px; border: 2px solid #555; border-radius: 10px; overflow: hidden; position: relative;
} .flüssigkeit-rot {
background-color: #ff6666; width: 100%; position: absolute; bottom: 0; animation: fillRed 2s ease-out forwards; animation-delay: 0s;
} .flüssigkeit-gelb {
background-color: #ffff66; width: 100%; position: absolute; bottom: 40%; animation: fillYellow 2s ease-out forwards; animation-delay: 2s;
} </style>
Kirschsaft und Bananensaft werden ins Glas gegossen.
