Wie erstellt man ein animiertes rundes Logo mit HTML, CSS und Javascript?

von | Jun 9, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

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("");

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert