gsap文字动画效果
代码语言:html
所属分类:动画
代码描述:gsap文字动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Public Sans Roman"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/PublicSans-Roman-VF.ttf"); } :root { --dark-purple: hsl(285, 86%, 4%); --neon-blue: hsl(190, 100%, 75%); --neon-pink: hsl(303, 100%, 73%); --size: 10; --unit: calc((var(--size) / 100) * 1vmin); } * { box-sizing: border-box; font-family: "Public Sans Roman"; font-variation-settings: "wght" 1000; margin: 0; padding: 0; } body { background: var(--dark-purple); } .container { position: relative; width: 100%; height: 100vh; } .text { position: absolute; left: calc(100vw / 4); right: calc(100vw / 4); -webkit-transform: rotate(-45deg) skew(15deg, 15deg); transform: rotate(-45deg) skew(15deg, 15deg); width: calc(500 * var(--unit)); height: calc(600 * var(--unit)); font-size: calc(160 * var(--unit)); -webkit-text-fill-color: #ffffff00; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: var(--neon-pink); line-height: calc(160 * var(--unit)); padding: calc(60 * var(--unit)); } .left-side, .bottom-side { position: absolute; background: none transparent; width: 0px; height: 0px; } .left-side { left: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0