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