d3实现文字拼凑成爱心动画效果代码-html代码-BFW代码库

d3实现文字拼凑成爱心动画效果代码

代码语言：html

所属分类：动画

代码描述：d3实现文字拼凑成爱心动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
        margin:0;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color:black;
        overflow:hidden;
    }
    .love {
        width:450px;
        height:450px;
        position:relative;
    }
    .love span {
        position:absolute;
        left:0;
        color:goldenrod;
        font-size:20px;
        font-family:sans-serif;
        text-shadow:0 0 1em white;
        animation:x-move 10s ease-in-out infinite alternate,y-move 20s linear infinite;
        animation-delay:calc(20s / var(--particles) * var(--n) * -1);
        user-select:none;
    }
    .love span:first-child {
        color:orangered;
        font-size:3em;
        text-shadow:0 0 0.1em black,0 0 1em white;
        z-index:1;
    }
    @keyframes x-move {
        to {
        left:450px;
    }
    }@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:translate.........完整代码请登录后点击上方下载按钮下载查看