文字动画过渡效果-html代码-BFW代码库

文字动画过渡效果

代码语言：html

所属分类：动画

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

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

    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Lato', sans-serif;
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background: #404555;
            background: -moz-radial-gradient(circle, #404555 0%, #2b2e39 100%);
            background: -webkit-radial-gradient(circle, #404555 0%, #2b2e39 100%);
            background: radial-gradient(circle, #404555 0%, #2b2e39 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#404555",endColorstr="#2b2e39",GradientType=1);
        }

        .container {
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 0 10px 0 0;
            letter-spacing: 1px;
        }
        .container.brownish {
            margin-top: 10px;
        }
        .container .texob {
            position: absolute;
            left: 20px;
        }
        .container .texob.l1 {
            top: 0;
            color: #17223a;
        }
        .container .texob.l2 {
            top: 35px;
            color: white;
        }
        .container .texob.l3 {
            top: 70px;
            color: #17223a;
        }
        .container .texob.l4 {
            top: 105px;
            color: white;
        }
        .container .texob h1 {
            padding: 14px 14px;
            position: relative;
            clip-path: polygon(0 91%, 100% 69%, 100% 100%, 0 100%);
            -webkit-clip-path: polygon(0 91%, 100% 69%, 100% 100%, 0 100%);
        }
    </style>

</head>
<body translate="no">
    <div class="main">
        <div class="container blurple">
            <div class='texob l1'>
                <h1>THE FASTER</h1>
            </div>
            <div class='texob l2'>
                <h1>YOU GO</h1>
            </div>
            <div class='texob l3'>
                <h1>THE SHORTER</h1>
            </div>
            <div.........完整代码请登录后点击上方下载按钮下载查看