朋友echarts周围要花一个像时钟一样的光圈，突发奇想像画一条🐟，然后就有了这篇博客，有时间，你还可以画一张你喜欢的小可爱的脸，把里面的东西稍微改动下，就可以有个嘴巴，耳朵，鼻子，刘海~
效果图
颜色是有那么一丢丢奇怪啦，毕竟没有水的🐟没有一条不奇怪的~
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>光圈</title><link type="text/css" href="css/style.css" rel="stylesheet" /><style>@charset "utf-8";* {margin: 0;padding: 0;}ul,ul>li {list-style-type: none;}body {background-color: #0c020b;}.clock {width: 500px;height: 500px;position: absolute;margin: auto;left: 0;top: 0;right: 0;bottom: 0;}.clock .mark,.clock .markr {position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100%;height: 100%;}.clock .mark li {/* 没有这个可以画一个耳朵 *//* position: absolute; */width: 3px;height: 4px;background: #039994;/*调节这个可以调节大小 */transform-origin: 16px;}.clock .markm li {/* position: absolute; */width: 6px;height: 2px;background: #039994;transform-origin: -95px;}.clock .marks li {position: absolute;top: 54px;left: -160px;width: 2px;height: 1px;background: #039994;transform-origin: 11px;}</style>
</head><body><div class="clock"><ul class="mark"></ul></div><div class="clock"><ul class="markm"></ul></div><div class="clock"><ul class="marks"></ul></div><script>{// 鱼头let i = 0;let html = "";while (i < 60) {let n = (i / 5) % 12;n = n === 0 ? 12 : n;//角度可以换形状html += `<li style="transform: translateY(0px) rotate(${i * 6}deg);"></li>`;i++;}// 鱼尾巴document.querySelector(".markm").innerHTML = html;i = 0;let htmlm = "";while (i < 30) {let n = (i / 20) % 12;n = n === 0 ? 12 : n;htmlm += `<li style="transform: translateY(0px) rotate(${i * 12}deg);"></li>`;i++;}document.querySelector(".mark").innerHTML = htmlm;//鱼眼睛i = 0;let htmls = "";while (i < 60) {let n = (i / 5) % 12;n = n === 0 ? 12 : n;htmls += `<li style="transform: translateY(0px) rotate(${i * 6}deg);"></li>`;i++;}document.querySelector(".marks").innerHTML = htmls;}</script>
</body></html>
