JS 写法
- <!DOCTYPE html>
- <HTML lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="renderer" content="webkit" />
- <meta name="force-rendering" content="webkit" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
- />
- <meta content="yes" name="apple-mobile-web-app-capable" />
- <meta content="black" name="apple-mobile-web-app-status-bar-style" />
- <meta name="author" content="ntnyq, 1210485244@qq.com" />
- <meta content="telephone=no, email=no" name="format-detection" />
- <title>
- 彩虹色 Demo
- </title>
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; } body { position:
- relative; display: flex; justify-content: center; align-items: center;
- flex-direction: column; height: 100vh; background-color: #111; overflow:
- hidden; } #wrapper { position: relative; display: flex; justify-content:
- center; align-items: center; flex-wrap: wrap; width: 90vmin; height: 90vmin;
- line-height: 1; font-size: 0; } #wrapper span { display: block; width:
- 9vmin; height: 9vmin; margin: .5vmin; }
- </style>
- </head>
- <body>
- <div id="wrapper">
- </div>
- <script>
- ((doc, win) = >{
- const length = 81 let HTML = [] Array.apply(null, {
- length
- }).map((_, idx) = >{
- HTML.push(` < span style = "background-color: hsl(${Math.round((idx * 360) / length)}, 100%, 50%)" > </span>`)
- })
- wrapper.innerHTML = HTML.join('')
- })(document, Windows)
- /
- </script>
- </body>
- </HTML>
SCSS 写法
- ```Sass/SCSS
- span {
- display: block;
- width: 9vmin;
- height: 9vmin;
- margin: .5vmin;
- background-color: red;
- $total: 81;
- @for $i from 1 through $total {
- $hue: round($i * 360 / $total);
- &:nth-of-type(#{$i}) {
- background-color: hsl($hue, 100%, 50%);
- }
- }
- }
来源: http://www.qdfuns.com/article/35320/0fa1c3a36091e05f04d2623f3e133a28.html