单个div+css实现10号大胡子卡通人物球员效果代码-html代码-BFW代码库

单个div+css实现10号大胡子卡通人物球员效果代码

代码语言：html

代码描述：单个div+css实现10号大胡子卡通人物球员效果代码，衣服自动更换。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');
        
        /* *, *::before, *::after { animation: none !important; } */
        
        @keyframes changeJersey {
          0%, 33.3%, 100% {
            --jersey-1: #147;
            --jersey-2: #d22;
            --pants: #147;
            --shadow: #0004;
            --sock-1: #147;
            --sock-2: #d22;
            --sock-3: #147;
            --jersey: radial-gradient(200% 100% at 50% 0, #0000 80%, var(--pants) 80.2%),
            radial-gradient(75% 350% at 50% 70%, var(--jersey-1) 19%, #0000 19.2%),
            radial-gradient(45% 100% at 50% 85%, var(--jersey-2) 80%, var(--jersey-1) 0);
            color: gold;
          }
          33.4%, 66.6% {
            --jersey-1: #9df;
            --jersey-2: #fff;
            --pants: #fff;
            --shadow: #0001;
            --sock-1: #9df;
            --sock-2: #9df;
            --sock-3: #fff;
            --jersey: radial-gradient(200% 100% at 50% 0, #0000 80%, var(--pants) 80.2%),
            radial-gradient(75% 350% at 50% 70%, var(--jersey-1) 19%, #0000 19.2%),
            radial-gradient(45% 100% at 50% 85%, var(--jersey-2) 80%, var(--jersey-1) 0);
            color: black;
          }
          66.7%, 99.9% {
            --jersey-1: #147;
            --jersey-2: #d22;
            --pants: #147;
            --shadow: #0004;
            --sock-1: #147;
            --sock-2: #d22;
            --sock-3: #147;
            --jersey: radial-gradient(200% 100% at 50% 0, #0000 80%, var(--pants) 80.2%),
            radial-gradient(75% 350% at 50% 70%, var(--light) 19%, var(--jersey-2) 19.2% 21.8%, var(--jersey-1) 22%);
            color: black;
          }
        }
        
        
        
        .ten {
          --s: 9s;
          --skin: #fca;
          --skin-dark: #eb9;
          --hair: #630;
          --dark: #111;
          --light: #eee;
          --jersey-1: #147;
          --jersey-2: #d22;
          --pants: #147;
          --shadow: #0004;
          --sock-1: #147;
          --sock-2: #d22;
          --sock-3: #147;
          --socks: radial-gradient(300% 100% at 66% 0, var(--skin) 40%, var(--sock-1) 40.4% 49%, var(--sock-2) 0 57%, var(--sock-3) 0) 42% 100% / 8.5% 13%,
            radial-gradient(300% 100% at 40% 0, var(--skin) 43%, var(--sock-1) 43.4% 52%, var(--sock-2) 0 60%, var(--sock-3) 0) 58% 100% / 8.5% 13%;
          --jersey: radial-gradient(200% 100% at 50% 0, #0000 80%, var(--pants) 80.2%),
            radial-gradient(75% 350% at 50% 70%, var(--jersey-1) 19%, #0000 19.2%),
            radial-gradient(45% 100% at 50% 85%, var(--jersey-2) 80%, var(.........完整代码请登录后点击上方下载按钮下载查看