How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code)-CSS Tutorial-php.cn

How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code)

不言

Release： 2018-08-18 11:10:30

Original

2630 people have browsed it

The content of this article is about how to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code). It has certain reference value. Friends in need can refer to it. Hope it helps.

Effect preview

How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code)

Source code download

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

Code Interpretation

Define dom, the container contains 3 sub-elements, one in each sub-element Word:

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

Copy after login

Centered display:

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

Copy after login

Define container size:

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

Copy after login

Set text style:

.love {
    position: relative;
}

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

Copy after login

Define the animation of text moving left and right:

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

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

Copy after login

Define the subscript variable of the sub-element and set the animation delay so that each word enters in sequence:

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

Copy after login

Increase the animation effect of text moving along the heart shape:

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

Copy after login

Next, use d3 to batch process dom elements and css variables.
Introduce the d3 library:

<script></script>

Copy after login

Declare an array containing several words:

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

Copy after login

Use d3 to create dom elements:

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

Copy after login

Use d3 to assign values to css variables:

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

Copy after login

Delete the relevant dom elements in the html file and the relevant css variables in the css file.

Change the array elements to the word "love" in various languages:

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

Copy after login

Finally, set a special text style for the first word:

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

Copy after login

Related recommendations ：

How to use CSS and D3 to achieve a black and white overlapping animation effect

How to use pure CSS to achieve an animation effect without DOM elements

How to use pure CSS to achieve a moving white rabbit animation effect

The above is the detailed content of How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code). For more information, please follow other related articles on the PHP Chinese website!