gsap实现霓虹灯文字闪烁动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap实现霓虹灯文字闪烁动画效果代码

代码标签: gsap 霓虹灯 文字 闪烁 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url(https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap);
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: #000;
          font-family: 'Fredoka One', cursive;;
          fobnt-weight: bold;
        }
        
        p {
          font-size: 25vmin;
          --hue: 0;
          -webkit-text-fill-color: transparent; 
          -webkit-text-stroke-width: 4px;
          -webkit-text-stroke-color: hsl(var(--hue), 50%, 95%);
          text-shadow:
            0 0 15px hsl(var(--hue), 60%, 90%, .80),
            0 0 20px hsl(var(--hue), 70%, 80%, .85),
            0 0 40px hsl(var(--hue), 80%, 70%, .90),
            0 0 60px hsl(var(--hue), 90%, 60%, .95),
            0 0 80px hsl(var(--hue), 100%, 50%, 1)
        }
    </style>



</head>

<body>
    <p&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0