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 {
     .........完整代码请登录后点击上方下载按钮下载查看