css实现文字颜色填充动画显示效果代码-html代码-BFW代码库

css实现文字颜色填充动画显示效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字颜色从左到右填充动画显示效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --background: #f3a683;
          --base: #303952;
          --accent: #786fa6;
          --shadow: #e77f67;
        }
        
        html {
          background: var(--background);
          display: grid;
          height: 100%;
          place-items: center;
        }
        
        .cool {
          font: bold 3rem/1.2 sans-serif;
          max-width: 20rem;
        }
        .cool span {
          color: var(--shadow);
          display: inline-block;
          position: relative;
        }
        .cool span:nth-child(1)::before, .cool span:nth-child(1)::after {
          -webkit-animation-delay: 0.1s;
                  animation-delay: 0.1s;
        }
        .cool span:nth-child(2)::before, .cool span:nth-child(2)::after {
          -webkit-animation-delay: 0.2s;
                  animation-delay: 0.2s;
        }
        .cool span:nth-child(3)::before, .cool span:nth-child(3)::after {
          -webkit-animation-delay: 0.3s;
                  animation-delay: 0.3s;
        }
        .cool span:nth-child(4)::before, .cool span:nth-child(4)::after {
          -webkit-animation-delay: 0.4s;
                  animation-delay: 0.4s;
        }
        .cool span:nth-child(5)::before, .cool span:nth-child(5)::after {
          -webkit-animation-delay: 0.5s;
                  animation-delay: 0.5s;
        }
        .cool span:nth-child(6)::before, .cool span:nth-child(6)::after {
          -webkit-animation-delay: 0.6s;
                  animation-delay: 0.6s;
        }
        .cool span:nth-child(7)::before, .cool span:nth-child(7)::after {
          -webkit-animation-delay: 0.7s;
                  animation-delay: 0.7s;
        }
        .cool span:nth-child(8)::before, .cool span:nth-child(8)::after {
          -webkit-animation-delay: 0.8s;
                  animation-delay: 0.8s;
        }
        .cool span:nth-child(9)::before, .cool span:nth-child(9)::after {
          -webkit-animation-delay: 0.9s;
                  animation-delay: 0.9s;
        }
        .cool span:nth-child(10)::before, .cool span:nth-child(10)::after {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        @media (pr.........完整代码请登录后点击上方下载按钮下载查看