css实现三维文字阴影随光照改变动画效果代码-html代码-BFW代码库

css实现三维文字阴影随光照改变动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现三维文字阴影随光照改变动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --speed: 10s;
        }
        
        body {
          background: radial-gradient(#b9b9ff, #151340);
          overflow: hidden;
        }
        
        main {
          width: 100vw;
          height: 100vh;
          display: grid;
          place-items: center;
        }
        
        .spot {
          position: absolute;
          width: 300vw;
          height: 300px;
          border-radius: 0 100% 100% 0;
          background: linear-gradient(90deg, transparent, transparent, #ffffff);
          filter: blur(20px);
          -webkit-animation: rotate var(--speed) ease infinite;
                  animation: rotate var(--speed) ease infinite;
        }
        
        .words,
        .shadowWrap,
        .shadowWords {
          position: absolute;
          font-family: "Paytone One", Arial, sans-serif;
          text-transform: uppercase;
          font-size: 10vw;
          white-space: nowrap;
          transform-origin: center center;
        }
        
        .words {
          color: #a4a4b1;
          text-shadow: 0 1px 1px #eee, 0 -3px 1px #555;
        }
        
        .shadowWrap {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          -webkit-animation: rotate var(--speed) linear infinite;
                  animation: rotate var(--speed) linear infinite;
        }
        
        .shadowWords {
          display: block;
          filter: blur(6px);
          color: #151340;
          -webkit-animation: straighten var(--speed) linear infinite;
     .........完整代码请登录后点击上方下载按钮下载查看