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

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

不言

Libérer： 2018-08-18 11:10:30

original

2597 Les gens l'ont consulté

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

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

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>

Copier après la connexion

Affichage central :

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

Copier après la connexion

Définir la taille du conteneur :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

<script></script>

Copier après la connexion

Déclarez un tableau contenant plusieurs mots :

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!