Wir erstellen einen runder rotierender Kreistext mit HTML, CSS und Javascript

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

<div class="kreis">
        <div class="kreistext">
            <p>Eric-Oliver Mächler - digitaler Feuermann</p>
        </div>
    </div>

CSS

.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

const text = document.querySelector(".kreistext p");
        text.innerHTML = text.innerText.split('').map(
            (char, i) =>
                `<span style="transform:rotate(${i * 8}deg)">${char}</span>`
        ).join('');