Comment utiliser CSS et D3 pour obtenir un effet d'animation en forme de cœur composé de texte (avec code)

Le contenu de cet article explique comment utiliser CSS et D3 pour obtenir un effet d'animation en forme de cœur composé de texte (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. ça aide.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient 3 sous-éléments, un dans chaque sous- élément Mot :

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

Affichage central :

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

Définir la taille du conteneur :

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

Définir le style du texte :

.love {
    position: relative;
}

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

Définition Animation de texte se déplaçant d'avant en arrière à gauche et à droite :

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

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

Définissez la variable d'indice du sous-élément et définissez le délai d'animation pour que chaque mot entre en séquence :

.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;
}

Ajoutez du texte le long de la forme du cœur Effet d'animation de mouvement :

.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); }
}

Ensuite, utilisez d3 pour traiter par lots les éléments dom et les variables CSS.
Présentez la bibliothèque d3 :

<script></script>

Déclarez un tableau contenant plusieurs mots :

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

Utilisez d3 pour créer des éléments dom :

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

Utilisez d3 Attribuez des valeurs aux variables CSS :

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

Supprimez les éléments dom pertinents dans le fichier html et les variables CSS pertinentes dans le fichier CSS.

Changez les éléments du tableau par le mot « amour » dans différentes langues :

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', 'ליבע'];

Enfin, définissez un style de texte spécial pour le premier mot :

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

Recommandations associées :

Comment utiliser CSS et D3 pour obtenir un effet d'animation superposé en noir et blanc

Comment utiliser du CSS pur pour obtenir un effet d'animation sans Éléments DOM

Comment utiliser du CSS pur pour obtenir un effet d'animation de lapin blanc en mouvement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!