点击查看html编辑器说明文档

CSS文字动画效果edit icon

|
|
Fork(复制)
|
图库
图片、视频、音频、图标资源库已上新
|
作者：
未来编码师
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ...
展开
</head>
<body>
            
            <div class="container">
    <div>文
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
        <div>文</div>
    </div>
    <div>字
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
        <div>字</div>
    </div>
    <div>动
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
        <div>动</div>
    </div>
    <div>画
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
        <div>画</div>
    </div>
</div>
</body>
CSS
格式化
            
            body {
    display: grid;
    place-items: center;
    height: 100vh;
    background: #333;
    overflow: hidden;
}
/* 容器 */
body .container {
    font-weight: 700;
    user-select: none;
}

body .container>div {
    display: inline-block;
    position: relative;
    font-size: min(20vw, 50vh);
    color: transparent;
    transform-origin: center center;
    transform-style: preserve-3d;
    animation: float 4s infinite;
}

body .container>div:nth-child(1) {
    animation-delay: -1.5s;
}

body .container>div:nth-child(2) {
    animation-delay: -1s;
}

body .container>div:nth-child(3) {
    animation-delay: -0.5s;
}

body .container>div:nth-child(4) {
    animation-delay: -0s;
}

body .container>div>div {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    text-shadow: 0 0 1px white;
}

body .container>div>div:not(:nth-child(n+3)),
body .container>div>div:not(:nth-last-child(n+3)) {
    color: #ef5566;
    text-shadow: 0 0 1px #ef5566;
}

body .container>div>div:nth-child(1) {
    transform: translateZ(-3.84vmin);
}

body .container>div>div:nth-child(2) {
    transform: translateZ(-2.88vmin);
}

body .container>div>div:nth-child(3) {
    transform: translateZ(-1.92vmin);
}

body .container>div>div:nth-child(4) {
    transform: translateZ(-0.96vmin);
}

body .container>div>div:nth-child(5) {
    transform: translateZ(0vmin);
}

body .container>div>div:nth-child(6) {
    transform: translateZ(0.96vmin);
}

body .container>div>div:nth-child(7) {
    transform: translateZ(1.92vmin);
}

body .container>div>div:nth-child(8) {
    transform: translateZ(2.88vmin);
}

body .container>div>div:nth-child(9) {
    transform: translateZ(3.84vmin);
}

body .container>div>div:nth-child(10) {
    transform: translateZ(4.8vmin);
}

@-webkit-keyframes float {
    0% {
        transform: rotate3d(0, 1, 0, 30deg);
    }

    1% {
        transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
    }

    2% {
        transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
    }

    3% {
        transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
    }

    4% {
        transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
    }

    5% {
        transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
    }

    6% {
        transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
    }

    7% {
        transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
    }

    8% {
        transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
    }

    9% {
        transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
    }

    10% {
        transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
    }

    11% {
        transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
    }

    12% {
        transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
    }

    13% {
        transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
    }

    14% {
        transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
    }

    15% {
        transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
    }

    16% {
        transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
    }

    17% {
        transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
    }

    18% {
        transform: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
    }

    19% {
        transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
    }

    20% {
        transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
    }

    21% {
        transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
    }

    22% {
        transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
    }

    23% {
        transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
    }

    24% {
        transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
    }

    25% {
        transform: rotate3d(1, 0, 0, 30deg);
    }

    26% {
        transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
    }

    27% {
        transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
    }

    28% {
        transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
    }

    29% {
        transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
    }

    30% {
        transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
    }

    31% {
        transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
    }

    32% {
        transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
    }

    33% {
        transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
    }

    34% {
        transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
    }

    35% {
        transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
    }

    36% {
        transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
    }

    37% {
        transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
    }

    38% {
        transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
    }

    39% {
        transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
    }

    40% {
        transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
    }

    41% {
        transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
    }

    42% {
        transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
    }

    43% {
        transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
    }

    44% {
        transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
    }

    45% {
        transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
    }

    46% {
        transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
    }

    47% {
        transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
    }

    48% {
        transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
    }

    49% {
        transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
    }

    50% {
        transform: rotate3d(0, -0.9999999999, 0, 30deg);
    }

    51% {
        transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
    }

    52% {
        transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
    }

    53% {
        transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
    }

    54% {
        transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
    }

    55% {
        transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
    }

    56% {
        transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
    }

    57% {
        transform: rotate3d(-0.4257792914, -0.9048270511, 0, 30deg);
    }

    58% {
        transform: rotate3d(-0.4817536738, -0.8763066781, 0, 30deg);
    }

    59% {
        transform: rotate3d(-0.5358267945, -0.8443279226, 0, 30deg);
    }

    60% {
        transform: rotate3d(-0.5877852516, -0.8090169902, 0, 30deg);
    }

    61% {
        transform: rotate3d(-0.6374239888, -0.7705132368, 0, 30deg);
    }

    62% {
        transform: rotate3d(-0.6845471045, -0.7289686189, 0, 30deg);
    }

    63% {
        transform: rotate3d(-0.7289686253, -0.6845470938, 0, 30deg);
    }

    64% {

        transform: rotate3d(-0.7705132398, -0.6374239727, 0, 30deg);
    }

    65% {

        transform: rotate3d(-0.8090169901, -0.5877852283, 0, 30deg);
    }

    66% {

        transform: rotate3d(-0.8443279194, -0.5358267614, 0, 30deg);
    }

    67% {

        transform: rotate3d(-0.8763066715, -0.4817536274, 0, 30deg);
    }

    68% {

        transform: rotate3d(-0.9048270404, -0.425779227, 0, 30deg);
    }

    69% {

        transform: rotate3d(-0.9297764691, -0.3681244637, 0, 30deg);
    }

    70% {

        transform: rotate3d(-0.9510564929, -0.3090168724, 0, 30deg);
    }

    71% {

        transform: rotate3d(-0.9685831287, -0.2486897207, 0, 30deg);
    }

    72% {

        transform: rotate3d(-0.9822872061, -0.1873810883, 0, 30deg);
    }

    73% {

        transform: rotate3d(-0.9921146401, -0.1253329274, 0, 30deg);
    }

    74% {

        transform: rotate3d(-0.9980266448, -0.0627901069, 0, 30deg);
    }

    75% {

        transform: rotate3d(-0.9999998862, 0.0000005537, 0, 30deg);
    }

    76% {

        transform: rotate3d(-0.9980265742, 0.0627912598, 0, 30deg);
    }

    77% {

        transform: rotate3d(-0.9921144932, 0.1253342195, 0, 30deg);
    }

    78% {

        transform: rotate3d(-0.982286971, 0.1873826227, 0, 30deg);
    }

    79% {

        transform: rotate3d(-0.9685827866, 0.2486916166, 0, 30deg);
    }

    80% {

        transform: rotate3d(-0.9510560166, 0.3090192726, 0, 30deg);
    }

    81% {

        transform: rotate3d(-0.9297758216, 0.3681275437, 0, 30deg);
    }

    82% {

        transform: rotate3d(-0.9048261725, 0.425783205, 0, 30deg);
    }

    83% {

        transform: rotate3d(-0.8763055184, 0.4817587777, 0, 30deg);
    }

    84% {

        transform: rotate3d(-0.8443263971, 0.5358334293, 0, 30deg);
    }

    85% {

        transform: rotate3d(-0.80901499, 0.5877938496, 0, 30deg);
    }

    86% {

        transform: rotate3d(-0.7705106226, 0.6374350969, 0, 30deg);
    }

    87% {

        transform: rotate3d(-0.7289652129, 0.6845614127, 0, 30deg);
    }

    88% {

        transform: rotate3d(-0.6845426698, 0.7289870018, 0, 30deg);
    }

    89% {

        transform: rotate3d(-0.6374182434, 0.7705367741, 0, 30deg);
    }

    90% {

        transform: rotate3d(-0.5877778306, 0.8090470459, 0, 30deg);
    }

    91% {

        transform: rotate3d(-0.5358172367, 0.8443661994, 0, 30deg);
    }

    92% {

        transform: rotate3d(-0.4817413984, 0.876355296, 0, 30deg);
    }

    93% {

        transform: rotate3d(-0.4257635689, 0.904888644, 0, 30deg);
    }

    94% {

        transform: rotate3d(-0.3681044689, 0.9298543169, 0, 30deg);
    }

    95% {

        transform: rotate3d(-0.3089914068, 0.9511546228, 0, 30deg);
    }

    96% {

        transform: rotate3d(-0.2486573708, 0.9687065223, 0, 30deg);
    }

    97% {

        transform: rotate3d(-0.1873400968, 0.9824419959, 0, 30deg);
    }

    98% {

        transform: rotate3d(-0.1252811139, 0.9923083591, 0, 30deg);
    }

    99% {

        transform: rotate3d(-0.062724773, 0.9982685263, 0, 30deg);
    }

    100% {

        transform: rotate3d(0.000082741, 1.000301224, 0, 30deg);
    }
}

@keyframes float {
    0% {

        transform: rotate3d(0, 1, 0, 30deg);
    }

    1% {

        transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
    }

    2% {

        transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
    }

    3% {

        transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
    }

    4% {

        transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
    }

    5% {

        transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
    }

    6% {

        transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
    }

    7% {

        transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
    }

    8% {

        transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
    }

    9% {

        transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
    }

    10% {

        transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
    }

    11% {

        transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
    }

    12% {

        transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
    }

    13% {

        transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
    }

    14% {

        transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
    }

    15% {

        transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
    }

    16% {

        transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
    }

    17% {

        transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
    }

    18% {

        transform: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
    }

    19% {

        transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
    }

    20% {

        transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
    }

    21% {

        transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
    }

    22% {

        transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
    }

    23% {

        transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
    }

    24% {

        transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
    }

    25% {

        transform: rotate3d(1, 0, 0, 30deg);
    }

    26% {

        transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
    }

    27% {

        transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
    }

    28% {

        transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
    }

    29% {

        transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
    }

    30% {

        transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
    }

    31% {

        transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
    }

    32% {

        transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
    }

    33% {

        transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
    }

    34% {

        transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
    }

    35% {

        transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
    }

    36% {

        transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
    }

    37% {

        transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
    }

    38% {

        transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
    }

    39% {

        transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
    }

    40% {

        transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
    }

    41% {

        transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
    }

    42% {

        transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
    }

    43% {

        transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
    }

    44% {

        transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
    }

    45% {

        transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
    }

    46% {

        transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
    }

    47% {

        transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
    }

    48% {

        transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
    }

    49% {

        transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
    }

    50% {

        transform: rotate3d(0, -0.9999999999, 0, 30deg);
    }

    51% {

        transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
    }

    52% {

        transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
    }

    53% {

        transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
    }

    54% {

        transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
    }

    55% {

        transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
    }

    56% {

        transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
    }

    57% {

        transform: rotate3d(-0.4257792914, -0.9048270511, 0, 30deg);
    }

    58% {

        transform: rotate3d(-0.4817536738, -0.8763066781, 0, 30deg);
    }

    59% {

        transform: rotate3d(-0.5358267945, -0.8443279226, 0, 30deg);
    }

    60% {

        transform: rotate3d(-0.5877852516, -0.8090169902, 0, 30deg);
    }

    61% {

        transform: rotate3d(-0.6374239888, -0.7705132368, 0, 30deg);
    }

    62% {

        transform: rotate3d(-0.6845471045, -0.7289686189, 0, 30deg);
    }

    63% {

        transform: rotate3d(-0.7289686253, -0.6845470938, 0, 30deg);
    }

    64% {

        transform: rotate3d(-0.7705132398, -0.6374239727, 0, 30deg);
    }

    65% {

        transform: rotate3d(-0.8090169901, -0.5877852283, 0, 30deg);
    }

    66% {

        transform: rotate3d(-0.8443279194, -0.5358267614, 0, 30deg);
    }

    67% {

        transform: rotate3d(-0.8763066715, -0.4817536274, 0, 30deg);
    }

    68% {

        transform: rotate3d(-0.9048270404, -0.425779227, 0, 30deg);
    }

    69% {

        transform: rotate3d(-0.9297764691, -0.3681244637, 0, 30deg);
    }

    70% {

        transform: rotate3d(-0.9510564929, -0.3090168724, 0, 30deg);
    }

    71% {

        transform: rotate3d(-0.9685831287, -0.2486897207, 0, 30deg);
    }

    72% {

        transform: rotate3d(-0.9822872061, -0.1873810883, 0, 30deg);
    }

    73% {

        transform: rotate3d(-0.9921146401, -0.1253329274, 0, 30deg);
    }

    74% {

        transform: rotate3d(-0.9980266448, -0.0627901069, 0, 30deg);
    }

    75% {

        transform: rotate3d(-0.9999998862, 0.0000005537, 0, 30deg);
    }

    76% {

        transform: rotate3d(-0.9980265742, 0.0627912598, 0, 30deg);
    }

    77% {

        transform: rotate3d(-0.9921144932, 0.1253342195, 0, 30deg);
    }

    78% {

        transform: rotate3d(-0.982286971, 0.1873826227, 0, 30deg);
    }

    79% {

        transform: rotate3d(-0.9685827866, 0.2486916166, 0, 30deg);
    }

    80% {

        transform: rotate3d(-0.9510560166, 0.3090192726, 0, 30deg);
    }

    81% {

        transform: rotate3d(-0.9297758216, 0.3681275437, 0, 30deg);
    }

    82% {

        transform: rotate3d(-0.9048261725, 0.425783205, 0, 30deg);
    }

    83% {

        transform: rotate3d(-0.8763055184, 0.4817587777, 0, 30deg);
    }

    84% {

        transform: rotate3d(-0.8443263971, 0.5358334293, 0, 30deg);
    }

    85% {

        transform: rotate3d(-0.80901499, 0.5877938496, 0, 30deg);
    }

    86% {

        transform: rotate3d(-0.7705106226, 0.6374350969, 0, 30deg);
    }

    87% {

        transform: rotate3d(-0.7289652129, 0.6845614127, 0, 30deg);
    }

    88% {

        transform: rotate3d(-0.6845426698, 0.7289870018, 0, 30deg);
    }

    89% {

        transform: rotate3d(-0.6374182434, 0.7705367741, 0, 30deg);
    }

    90% {

        transform: rotate3d(-0.5877778306, 0.8090470459, 0, 30deg);
    }

    91% {

        transform: rotate3d(-0.5358172367, 0.8443661994, 0, 30deg);
    }

    92% {

        transform: rotate3d(-0.4817413984, 0.876355296, 0, 30deg);
    }

    93% {

        transform: rotate3d(-0.4257635689, 0.904888644, 0, 30deg);
    }

    94% {

        transform: rotate3d(-0.3681044689, 0.9298543169, 0, 30deg);
    }

    95% {

        transform: rotate3d(-0.3089914068, 0.9511546228, 0, 30deg);
    }

    96% {

        transform: rotate3d(-0.2486573708, 0.9687065223, 0, 30deg);
    }

    97% {

        transform: rotate3d(-0.1873400968, 0.9824419959, 0, 30deg);
    }

    98% {

        transform: rotate3d(-0.1252811139, 0.9923083591, 0, 30deg);
    }

    99% {

        transform: rotate3d(-0.062724773, 0.9982685263, 0, 30deg);
    }

    100% {

        transform: rotate3d(0.000082741, 1.000301224, 0, 30deg);
    }
}
JS
格式化
预览
控制台