Heute möchte ich euch mal zeigen wie ihr so ein rundes Logo erstellen könnt und um das sich ein Text dreht. Für diese kleine Animation verwenden wir reines HTML, CSS und eine Prise Javascript.
Diese Animation kann man gut verwenden um eine Webseite oder Online Shop aufzupeppen oder auch als Overlay für ein Livestream.
Video
HTML
Wie immer ist das HTML Grundgerüst sehr einfach gehalten. Das Logo wird über die CSS Klasse Logo eingebunden und der Text hier definiert
1 2 3 4 5 6 | <div class="kreis">
<div class="logo"></div>
<div class="text">
<p>Eric Oliver Mächler - Blogger & Youtuber</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 37 38 39 40 41 42 43 | .kreis {
position: relative;
width: 200px;
height: 200px;
/*background: #ccc;*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
position: absolute;
width: 150px;
height: 150px;
background: url(logo.jpg);
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text {
position: absolute;
width: 100%;
height: 100%;
animation: drehen 10s linear infinite;
}
.text span {
position: absolute;
left: 50%;
font-size: 15px;
transform-origin: 0 100px;
}
@keyframes drehen {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
} |
Javascript
Denkt daran, dass ihr hier ein klein wenig mit eurem Text und den Grad / Deg Angaben experimentieren müsst. Je nach Anzahl der Buchstaben müsst ihr sie grösser oder kleiner machen – je nachdem wie verteilt ihr die Buchstaben im runden Text haben wollt.
1 2 3 4 5 6 7 | const text = document.querySelector(".text p");
text.innerHTML = text.innerText
.split("")
.map(
(char, i) => `<span style='transform:rotate(${i * 8.3}deg)'>${char}</span>`
)
.join(""); |
0 Kommentare