CESESE
CESESE
CESESE
-
- 1 / 8
-
Lernkarten
runde ecken
border-radius: 25px;
boxschatten
box-shadow: 10px 10px 5px #farbe;
textschatten
text-shadow: 5px 5px 5px #FF0000;
Transitions
:hover Mausüber dem OBjekt
:focus Benutzer hat objekt selektiert
:active Benutzer hat objekt angeglickt
Transitions-- Veränderungen
transition-property: width; - welche eigenschaft
transition-duration: 1s; wie lange es verändert
transition-timing-function: linear;
transition-delay: 2s; wie gross ist die verzögerung
Animation
@ keyframes NAME{
0% {background:red ; height:100px;}
25% {background: yellow; height:100px;}
50% {background:blue; height:200px;}
100% {background:green; height:400px;}
}
Animations wie definieren
animation-name: NAME;
animatino-duration: 5s; dauer
animation-timing-function: linear; verlauf
animation-delay: 2s;
-> animation: NAME 5s linear 2s;
Circle
<svg>
<circle cx="100" cy="50" r="40" stroke="black" fill="red" stroke-width="2" />
</circle>
