js画一条快乐的胖丁鱼_用javascrip画一条鱼-CSDN博客

本文链接：https://blog.csdn.net/Yannnnnm/article/details/115654854

朋友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>