一个div+css实现赛车道上赛车效果代码-html代码-BFW代码库

代码语言：html

代码描述：一个div+css实现赛车道上赛车效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        :root {
          --size: 50;
          --unit: calc((var(--size) / 50) * 1vmin);
        }
        
        body {
          background-color: LimeGreen;
          height: 100vh;
          margin: 0;
          padding: calc(var(--unit) * 15);
        }
        
        div {
          background: 
        
            /* Boxes - Pink */
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 30% 41.1% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 30% 41.1% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 30% 38.4% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 30% 38.4% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 30% 35.8% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 30% 35.8% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 30% 33.2% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 30% 33.2% / 1% 2%,
        
            /* Boxes - Blue */
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 70% 58.9% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 70% 58.9% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 70% 61.6% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 70% 61.6% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 70% 64.2% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 70% 64.2% / 1% 2%,
            linear-gradient(90deg, transparent 5%, rgba(255, 192, 203, 0.5) 1% 33%, rgba(0, 255, 255, 0.5) 33% 66%, rgba(255, 255, 0, 0.5) 66% 95%, transparent 95%) 70% 66.8% / 1% 1.7%,
            linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 70% 66.8% / 1% 2%,
        
            /* Starting Lines  */
            linear-gradient(white, white) 59% 41.1% / .25% 2%,
            linear-gradient(white, white) 58% 38.9% / .25% 2%,
            linear-gradient(white, white) 57% 36.5% / .25% 2%,
            linear-gradient(white, white) 56% 34.1% / .25% 2%,
        
            linear-gradient(white, white) 55% 41.1% / .25% 2%,
            linear-gradient(white, white) 54% 38.9% / .25% 2%,
            linear-gradient(white, white) 53% 36.5% / .25% 2%,
            linear-gradient(white, white) 52% 34.1% / .25% 2%,
        
            /* Finish Line */
            linear-gradient(black 10%, white 10% 20%, black 20% 30%, white 30% 40%, black 40% 50%, white 50% 60%, black 60% 70%, white 70% 80%, black 80% 90%, white 90% 100%) 60% 36.1% / 1% 10.7%,
            linear-gradient(white 10%, black 10% 20%, white 20% 30%, black 30% 40%, white 40% 50%, black 50% 60%, white 60% 70%, black 70% 80%, white 80% 90%, black 90% 100%) 61% 36.1% / 1% 10.7%,
        
            /* Grating */
            linear-gradient(limegreen 5%, gold 5% 7%, limegreen 7% 12%, gold 12% 14%, limegreen 14% 19%, gold 19% 21%, limegreen 21% 26%, gold 26% 28%, limegreen 28% 33%, gold 33% 35%, limegreen 35% 40%, gold 40% 42%, limegreen 42% 47%, gold 47% 49%, limegreen 49% 54%, gold 54% 56%, limegreen 56% 61%, gold 61% 63%, limegreen 63% 68%, gold 68% 70%, limegreen 70% 75%, gold 75% 77%, limegreen 77% 82%, gold 82% 84%, limegreen 84% 89%, gold 89% 91%, limegreen 91% 96%, gold 96% 98%, limegreen 98%) 45% 36.1% / .5% 10%,
            linear-gradient(limegreen 5%, gold 5% 7%, limegreen 7% 12%, gold 12% 14%, limegreen 14% 19%, gold 19% 21%, limegreen 21% 26%, gold 26% 28%, limegreen 28% 33%, gold 33% 35%, limegreen 35% 40%, gold 40% 42%, limegreen 42% 47%, gold 47% 49%, limegreen 49% 54%, gold 54% 56%, limegreen 56% 61%, gold 61% 63%, limegreen 63% 68%, gold 68% 70%, limegreen 70% 75%, gold 75% 77%, limegreen 77% 82%, gold 82% 84%, limegreen 84% 89%, gold 89% 91%, limegreen 91% 96%, gold 96% 98%, limegreen 98%) 45.6% 36.1% / .5% 10%,
            linear-gradient(limegreen 5%, gold 5% 7%, limegreen 7% 12%, gold 12% 14%, limegreen 14% 19%, gold 19% 21%, limegreen 21% 26%, gold 26% 28%, limegreen 28% 33%, gold 33% 35%, limegreen 35% 40%, gold 40% 42%, limegreen 42% 47%, gold 47% 49%, limegreen 49% 54%, gold 54% 56%, limegreen 56% 61%, gold 61% 63%, limegreen 63% 68%, gold 68% 70%, limegreen 70% 75%, gold 75% 77%, limegreen 77% 82%, gold 82% 84%, limegreen 84% 89%, gold 89% 91%, limegreen 91% 96%, gold 96% 98%, limegreen 98%) 46.3% 36.1% / .5% 10%,
            linear-gradient(limegreen 5%, gold 5% 7%, limegreen 7% 12%, gold 12% 14%, limegreen 14% 19%, gold 19% 21%, limegreen 21% 26%, gold 26% 28%, limegreen 28% 33%, gold 33% 35%, limegreen 35% 40%, gold 40% 42%, limegreen 42% 47%, gold 47% 49%, limegreen 49% 54%, gold 54% 56%, limegreen 56% 61%, gold 61% 63%, limegreen 63% 68%, gold 68% 70%, limegr.........完整代码请登录后点击上方下载按钮下载查看