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;
        	transform: rotateX(20deg) rotateY(20deg) rotateZ(-15deg);
        	mix-blend-mode: overlay;
        }
        
        p.good,
        p.friend {
        	color: var(--black);
        	font-size: 2.5rem;
        
        	text-align: center;
        }
        p.morning {
        	text-transform: uppercase;
        	font-size: 5rem;
        	font-weight: 700;
        	color: var(--white);
        	line-height: 0.8em;
        }
        
        .txtblock {
        	position: relative;
        	height: 4em;
        }
        .txtblock > * {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	transform: translate(-50%, -50%);
        }
        .txtblock span {
        	display: block;
        	padding: 0px 5px;
        	background.........完整代码请登录后点击上方下载按钮下载查看