单个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(--jersey-1) 0);
          color: gold;
          animation: changeJersey var(--s) linear infinite;
          font-size: 3vmin;
          width: 30em;
          height: 30em;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 0);
          background:
            /* hair */
            radial-gradient(farthest-side at 50% 100%, var(--hair) 99.7%, #0000 99.99%) 50% 0% / 61.25% 35%,
            radial-gradient(farthest-side at 100% 100%, var(--hair) 99.7%, #0000 99.99%) 25% 5% / 32% 16.25%,
            radial-gradient(farthest-side at 100% 130%, var(--hair) 99.7%, #0000 99.99%) 22% 0% / 35% 16%,
            radial-gradient(farthest-side at 100% 130%, var(--hair) 99.7%, #0000 99.99%) 23% 0% / 33% 11%,
            /* ears */
            radial-gradient(circle at 20% 38%, var(--skin-dark) 2%, var(--skin) 0 5%, #0000 5.1%),
            radial-gradient(circle at 80% 38%, var(--skin-dark) 2%, var(--skin) 0 5%, #0000 5.1%),
            /* feet */
            linear-gradient(90deg, #0000 37%, #000 0 47%, #0000 0 53%, #000 0 63%, #0000 0) 0 100% / 100% 3%,
            radial-gradient(farthest-side at 100% 100%, #000 99.99%, #0000 0) 35% 100% / 4% 3%,
            radial-gradient(farthest-side at 0% 100%, #000 99.99%, #0000 0) 65.5% 100% / 4% 3%,
            /* legs */
            var(--socks),
            /* arms */
            radial-gradient(farthest-side.........完整代码请登录后点击上方下载按钮下载查看