css文字立体阴影渐显动画效果代码-html代码-BFW代码库

css文字立体阴影渐显动画效果代码

代码语言：html

所属分类：动画

代码描述：css文字立体阴影渐显动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Cherry+Swash&family=Kanit:wght@900&display=swap" rel="stylesheet">



    <style>
        :root {
          --shadeColor: #3042cf;
          --blueColor: #1d9bf0;
          --blueHover: #28beff;
        }
        body {
          overflow: hidden;
          background-color: var(--blueColor);
          font-family: "Kanit", sans-serif;
        }
        .numDiv {
          color: var(--blueColor);
          display: inline-block;
          font-size: 40vmin;
          font-weight: 900;
          text-shadow: -1px 1px var(--shadeColor), -2px 2px var(--shadeColor);
          -webkit-animation: numAnim 1000ms cubic-bezier(1, 0, 0, 1) alternate infinite;
                  animation: numAnim 1000ms cubic-bezier(1, 0, 0, 1) alternate infinite;
        }
        .numDiv:nth-of-type(2) {
          -webkit-animation-delay: -200ms;
                  animation-delay: -200ms;
        }
        .numDiv:nth-of-type(3) {
          -webkit-animation-delay: -400ms;
                  animation-delay: -400ms;
        }
        @-webkit-keyframes numAnim {
          to {
            color: var(--blueHover);
            transform: translate(8px, -8px);
            text-shadow: -1px 1px var(--shadeColor), -2px 2px var(--shadeColor),
              -3px 3px var(--shadeColor), -4px 4px var(--shadeColor),
              -5px 5px var(--shadeColor), -6px 6px var(--shadeColor),
              -7px 7px var(--shadeColor), -8px 8px var(--shadeColor),
              -9px 9px var(--shadeColor), -10px 10px var(--shadeColor);
          }
        }
        @keyframes numAnim {
          to {
            color: var(--blueHover);
            transform: translate(8px, -8px);
            text-shadow: -1px 1px var(--shadeColor), -2px 2px var(--shadeColor),
              -3px 3px var(--shadeColor), -4px 4px var(--shadeColor),
              -5px 5px .........完整代码请登录后点击上方下载按钮下载查看