单个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;
   .........完整代码请登录后点击上方下载按钮下载查看