单个div+css实现背景旋转文字缩放动画效果代码-html代码-BFW代码库

单个div+css实现背景旋转文字缩放动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现背景旋转文字缩放动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @font-face {
          font-family: "POP";
          font-weight: bold;
          src: url("https://assets.codepen.io/1480814/MiriamLibre-Bold.ttf")
        }
        .pop {
          display: grid;
          position: fixed;
          inset: -200vmax;
          place-content: center;
          background: repeating-conic-gradient(at 50% 50%,#006f8d 0 18deg,#0000 0 36deg);
          animation: a 1.6s infinite linear;
        }
        .pop::before, 
        .pop::after {
          content: attr(class);
          grid-area: 1/1;
          font-size: 200px;
          font-family: "POP", monospace;
          font-weight: bold;
          text-transform: uppercase;
          color: #0000;
          background: radial-gradient(#fba41a 42%,#fef210 44%) 0 0/12px 12px;
          -webkit-background-clip: text;
          background-clip: text;
          transform: rotate(0deg) skewY(-8deg);
          animation: b 1.6s infinite linear;
        }
 .........完整代码请登录后点击上方下载按钮下载查看