Wir erstellen einen runder rotierender Kreistext mit HTML, CSS und Javascript
von Eric-Oliver Mächler | Mai 13, 2024 | Design |
Wenn man eine Webseite verbessert oder designt, dann möchte man gewisse Elemente haben die einfach den Leute im Kopf bleiben – dem sag ich dann „einen Anker setzen“. Sowas kann über eine spezielle UX sein oder ein spezielles Element.
Im heutigen Video zeige ich euch wie ihr so ein auffallendes Element designen könnt und zwar in der Form eines Runden Textes das sich dreht – das man dann überall positionieren kann -> zb in der sogenannten Hero Sektion.
Video
HTML
1
2
3
4
5
| <div class="kreis">
<div class="kreistext">
<p>Eric-Oliver Mächler - digitaler Feuermann</p>
</div>
</div> |
<div class="kreis">
<div class="kreistext">
<p>Eric-Oliver Mächler - digitaler Feuermann</p>
</div>
</div>
CSS
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
| .kreis {
position: relative;
width: 200px;
height: 200px;
/*background: red;*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.kreistext {
width: 100%;
height: 100%;
position: absolute;
animation: kreisen 10s linear infinite
}
.kreistext span {
position: absolute;
left: 50%;
font-size: 1.2rem;
transform-origin: 0 100px;
}
@keyframes kreisen {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(365deg)
}
} |
.kreis {
position: relative;
width: 200px;
height: 200px;
/*background: red;*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}.kreistext {
width: 100%;
height: 100%;
position: absolute;
animation: kreisen 10s linear infinite
}.kreistext span {
position: absolute;
left: 50%;
font-size: 1.2rem;
transform-origin: 0 100px;
}@keyframes kreisen {
0% {
transform: rotate(0deg)
}100% {
transform: rotate(365deg)
}}
Javascript
1
2
3
4
5
| const text = document.querySelector(".kreistext p");
text.innerHTML = text.innerText.split('').map(
(char, i) =>
`<span style="transform:rotate(${i * 8}deg)">${char}</span>`
).join(''); |
const text = document.querySelector(".kreistext p");
text.innerHTML = text.innerText.split('').map(
(char, i) =>
`<span style="transform:rotate(${i * 8}deg)">${char}</span>`
).join('');
0 Kommentare