animejs实现文字动画飞入效果-html代码-BFW代码库

animejs实现文字动画飞入效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Animation (Background &amp; Text)</title>
    <style>
@import url("https://fonts.googleapis.com/css?family=Kanit:100,700");
        body {
            font-family: "Kanit", sans-serif;
            margin: 0;
            height: 100vh;
            overflow: hidden;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .effect1 {
            position: absolute;
            margin: 0;
            top: 43%;
            font-size: 2.3em;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            z-index: 3;
            color: #F6A9BD;
        }

        .effect1 .letter {
            display: inline-block;
            line-height: 1em;
        }

        p {
            position: absolute;
            font-size: 1.8em;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: #F0386B;
            font-weight: 100;
            top: 50%;
            z-index: 3;
            opacity: 0;
            top: 50%;
        }

        section {
            display: grid;
            grid-template-columns: repeat(10, auto);
        }

        .item {
            background-color: #F4E0E1;
            height: 100vh;
            z-index: 0;
        }

    </style>

</head>
<body translate="no">
    <div class="container">
        <h1 class="effect1">hello there, welcome!</h1>
        <p>
            nice to meet you
        </p>
    </div>
    <section>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div c.........完整代码请登录后点击上方下载按钮下载查看