css+svg实现文字背景虚幻雾化动画效果代码-html代码-BFW代码库

css+svg实现文字背景虚幻雾化动画效果代码

代码语言：html

所属分类：背景

代码描述：css+svg实现文字背景彩色虚幻雾化渡动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css?family=Libre+Franklin:400,700&subset=latin");
        html {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          background: #fff;
        }
        
        *,
        *:before,
        *:after {
          box-sizing: inherit;
        }
        
        body {
          width: 100%;
          height: 100%;
          font: 100px/100px "Libre Franklin";
          font-weight: 900;
          color: white;
          -webkit-font-smoothing: antialiased;
          font-smoothing: antialiased;
          overflow: hidden;
        }
        
        .child {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          letter-spacing: -5px;
          mix-blend-mode: overlay;
          text-shadow: 0 0 5px #fff;
          color: #fff6;
        }
        
        svg {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }
    </style>


</head>

<body>
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
    <defs>
      <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
        <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#ff0" />
        <stop offset="100%" stop-color="#ff00" />
      </radialGradient>
       <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
        <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#0ff" />
        <stop offset="100%" stop-color="#0ff0" />
      </radialGradient>
      <radialGradient id="Gradient3" cx="50%&qu.........完整代码请登录后点击上方下载按钮下载查看