gsap实现三维文字突出阴影显示动画效果代码-html代码-BFW代码库

gsap实现三维文字突出阴影显示动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现三维文字突出阴影显示动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *,
        *::after,
        *::before {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
        }
        
        @font-face {
                font-family: "Square Sans Serif";
                src: url("https://www.sicontis.com/codepen/cpc-text-shadow/fonts/square-sans-serif-7.regular.woff2")
                                format("woff2"),
                        url("https://www.sicontis.com/codepen/cpc-text-shadow/fonts/square-sans-serif-7.regular.woff")
                                format("woff");
        }
        
        body {
                height: 100vh;
                width: 100vw;
        
                --mustard: #e5c470;
                --white: #ececec;
                --black: #3f3e3e;
        
                background: var(--mustard);
                background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
        }
        
        .wrapper {
                position: fixed;
                width: 100%;
                height: 100%;
                display: grid;
                place-items: center;
                perspective: 1000px;
                background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.3) 80%);
                z-index: 3;
        }
        
        .container {
                width: min-content;
                height: auto;
                padding: 1em;
                text-align: center;
                font-family: "Square Sans Serif", sans-serif;
        
                transform-style: preserve-3d;
  .........完整代码请登录后点击上方下载按钮下载查看