Heute möchte ich euch mal zeigen wie ihr eine Schrift auch mal anders animieren könnt. Anstatt das ihr nur die Farben oder Grösse einer Schrift verändert, lernt ihr heute wie ihr auch die Farbe selbst animieren könnt. Diesmal verwenden wir dafür ne Art Maske wie in der Videobearbeitung und somit kann man noch spannendere farbliche Anpassungen durchführen.
Video
HTML
1
2
3
4
| <div class="text">
<span>Eric-Oliver Mächler</span>
<span>Eric-Oliver Mächler</span>
</div> |
<div class="text">
<span>Eric-Oliver Mächler</span>
<span>Eric-Oliver Mächler</span>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .text span {
position: absolute;
color: #a81010;
font-size: 4rem;
transform: translate(-50%, -50%);
}
.text span:nth-child(1) {
color: #a81010;
}
.text span:nth-child(2) {
color: #fff;
-webkit-text-stroke: 1px #fff;
animation: anima 3s ease-in-out infinite;
} |
.text span {
position: absolute;
color: #a81010;
font-size: 4rem;
transform: translate(-50%, -50%);
}
.text span:nth-child(1) {
color: #a81010;
}
.text span:nth-child(2) {
color: #fff;
-webkit-text-stroke: 1px #fff;
animation: anima 3s ease-in-out infinite;
}
Denkt daran wenn ihr die Keyframe animation austauschen möchtet, müsst ihr den Titel ändern von anima auf kreis oder zurück
Keyframes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| @keyframes anima {
0%,
100% {
clip-path: polygon(
0% 45%,
15% 44%,
32% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
16% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 54%,
100% 46%,
100% 100%,
0% 100%
);
}
}
@keyframes kreis {
0%,
100% {
clip-path: ellipse(50% 10% at 50% 50%);
}
50% {
clip-path: ellipse(50% 28% at 50% 50%);
}
} |
@keyframes anima {
0%,
100% {
clip-path: polygon(
0% 45%,
15% 44%,
32% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
16% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 54%,
100% 46%,
100% 100%,
0% 100%
);
}
}@keyframes kreis {
0%,
100% {
clip-path: ellipse(50% 10% at 50% 50%);
}
50% {
clip-path: ellipse(50% 28% at 50% 50%);
}
}
0 Kommentare