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

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

代码语言：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% .........完整代码请登录后点击上方下载按钮下载查看