So erzielen Sie mit CSS und D3 einen herzförmigen Animationseffekt aus Text (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und D3, um einen herzförmigen Animationseffekt aus Text zu erzielen (mit Code). Freunde in Not können sich darauf beziehen es hilft.

Effektvorschau

Quellcode-Download

https:/ /github.com/comehope/front-end-daily-challenges

Codeinterpretation

Dom definieren, der Container enthält 3 Unterelemente, eines in jedem Unterelement Element Wort:

<div>
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
</div>

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Containergröße definieren:

.love {
    width: 450px;
    height: 450px;
}

Textstil festlegen:

.love {
    position: relative;
}

.love span {
    position: absolute;
    left: 0;
    color: goldenrod;
    font-size: 20px;
    font-family: sans-serif;
    text-shadow: 0 0 1em white;
}

Animation der Textbewegung nach links und definieren rechts:

.love span {
    animation: x-move 10s ease-in-out infinite alternate;
}

@keyframes x-move {
    to {
        left: 450px;
    }
}

Definieren Sie die Indexvariable des Unterelements und stellen Sie die Animationsverzögerung so ein, dass jedes Wort der Reihe nach eingeht:

.love {
    --particles: 3;
}

.love span {
    animation-delay: calc(20s / var(--particles) * var(--n) * -1);
}

.love span:nth-child(1) {
    --n: 1;
}

.love span:nth-child(2) {
    --n: 2;
}

.love span:nth-child(3) {
    --n: 3;
}

Fügen Sie den Animationseffekt von Text hinzu, der sich entlang der Herzform bewegt:

.love span {
    animation: 
        x-move 10s ease-in-out infinite alternate,
        y-move 20s linear infinite;
}

@keyframes y-move {
    0% { transform: translateY(180px); }
    10% { transform: translateY(45px); }
    15% { transform: translateY(5px); }
    18% { transform: translateY(0); }
    20% { transform: translateY(5px); }
    22% { transform: translateY(35px); }
    24% { transform: translateY(65px); }
    25% { transform: translateY(110px); }
    26% { transform: translateY(65px); }
    28% { transform: translateY(35px); }
    30% { transform: translateY(5px); }
    32% { transform: translateY(0); }
    35% { transform: translateY(5px); }
    40% { transform: translateY(45px); }
    50% { transform: translateY(180px); }
    71% { transform: translateY(430px); }
    72.5% { transform: translateY(440px); }
    75% { transform: translateY(450px); }
    77.5% { transform: translateY(440px); }
    79% { transform: translateY(430px); }
    100% { transform: translateY(180px); }
}

Als nächstes verwenden Sie d3, um Dom-Elemente und CSS-Variablen stapelweise zu verarbeiten.
Stellen Sie die d3-Bibliothek vor:

<script></script>

Deklarieren Sie ein Array mit mehreren Wörtern:

const words = ['aaa', 'bbb', 'ccc'];

Verwenden Sie d3, um Dom-Elemente zu erstellen:

d3.select('.love')
    .selectAll('span')
    .data(words)
    .enter()
    .append('span')
    .text((d) => d);

Verwenden Sie d3, um Werte zuzuweisen zu CSS-Variablen:

d3.select('.love')
    .style('--particles', words.length)
    .selectAll('span')
    .data(words)
    .enter()
    .append('span')
    .style('--n', (d, i) => i + 1)
    .text((d) => d);

Löschen Sie die relevanten Dom-Elemente in der HTML-Datei und die relevanten CSS-Variablen in der CSS-Datei.

Ändern Sie die Array-Elemente in das Wort „love“ in verschiedenen Sprachen:

const words = [
    '愛', 'Love', 'Amour', 'Liebe', 'Amore',
    'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta',
    'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне',
    'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה', 
    'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов', 
    'Љубовта', 'Cinta', 'عشق', 'Dragoste', 'Láska', 
    'Renmen', 'ፍቅር', 'munaña', 'Sevgi', 'Љубав', 
    'karout', 'amà', 'amôr', 'kærleiki', 'mborayhu', 
    'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю', 
    'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम', 
    'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek', 
    'Mahal', 'ярату', 'محبت', 'sopp', 'uthando', 
    'ความรัก', 'Aşk', 'Tình yêu', 'ליבע'];

Legen Sie abschließend einen speziellen Textstil für das erste Wort fest:

.love span:first-child {
    color: orangered;
    font-size: 3em;
    text-shadow: 
        0 0 0.1em black,
        0 0 1em white;
    z-index: 1;
}

Verwandte Empfehlungen:

So verwenden Sie CSS und D3, um einen überlappenden Schwarz-Weiß-Animationseffekt zu erzielen

So verwenden Sie reines CSS, um einen Animationseffekt ohne DOM-Elemente zu erzielen

So verwenden Sie reines CSS, um einen bewegten Animationseffekt für weiße Kaninchen zu erzielen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS und D3 einen herzförmigen Animationseffekt aus Text (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!