马黑黑 发表于 2024-9-7 18:15

无穷大图标代码

<h2>代码：</h2>

<div class="hE"><pre id="codebox">
&lt;style&gt;
.infinity {
        --size: 200px;
        --border: 16px;
        margin: 30px auto;
        width: var(--size);
        height: var(--size);
        border: 1px solid gray;
        filter: drop-shadow(0 0 6px black);
        position: relative;
}
.infinity::before, .infinity::after {
        position: absolute;
        content: '';
        width: calc(50% - var(--border) * 1.5);
        height: calc(50% - var(--border) * 1.5);
        border: var(--border) solid teal;
        border-radius: 50% 50% 0 50%;
        transform-origin: 100% 100%;
}
.infinity::after {
        transform: rotate(-180deg) translate(var(--border), var(--border));
}
&lt;/style&gt;

&lt;div class="infinity"&gt;&lt;/div&gt;
</pre></div>

        <p><button id="btnRun" type="button" value="run">运行代码</button></p>
        <div id="showBox"></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        ele.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};

btnRun.onclick = () => {
        runCodes(codebox.innerText, showBox);
        btnRun.disabled = true;
};
</script>

马黑黑 发表于 2024-9-7 18:23

伪元素画出矩形中左上方向四分之一的图标，然后其中一个伪元素旋转180度并左移、下移到右下角。数据的计算精准到位，仅需改变两个CSS变量 --size 和 --border 宽高不同、曲线粗细不同的图案。图案边框用于观察，实际使用时可以去掉或经过加工参与到图案中来。

需要平躺的无穷大图案，可在 .infinity 选择器中加入旋转语句，-45度。

彩云归 发表于 2024-9-7 18:49

{:4_199:}

马黑黑 发表于 2024-9-7 20:01

彩云归 发表于 2024-9-7 18:49


感谢

花飞飞 发表于 2024-9-7 20:02

我在瞅它怎么变成空心的了。。裁的本来是一块儿的。把背景background-color:换成--border: 16px;就只有一条边了？

花飞飞 发表于 2024-9-7 20:04

width: calc(50% - var(--border) * 1.5);
height: calc(50% - var(--border) * 1.5);
这两句可以控制大小。。

花飞飞 发表于 2024-9-7 20:05

本帖最后由 花飞飞 于 2024-9-7 20:07 编辑 <br /><br /><style>
.infinity {
        --size: 200px;
        --border: 16px;
        margin: 30px 0 30px calc(50% - 481px);
        width: var(--size);
        height: var(--size);
        filter: drop-shadow(0 0 6px black);
        position: relative;
        transform: rotate(135deg);
        transform-origin: 100% 100%;
        }
.infinity::before, .infinity::after {
        position: absolute;
        content: '';
    width: calc(50% - var(--border) * 1.5);
        height: calc(50% - var(--border) * 1.5);
        border: var(--border) solid         DeepPink;
        border-radius: 50% 50% 0 50%;
        transform-origin: 100% 100%;
}
.infinity::after {
        transform: rotate(-180deg) translate(var(--border), var(--border));
}
</style>

<div class="infinity"></div>

花飞飞 发表于 2024-9-7 20:07

{:4_198:}偏到哪里去了

马黑黑 发表于 2024-9-7 20:08

花飞飞 发表于 2024-9-7 20:07
偏到哪里去了

正了

花飞飞 发表于 2024-9-7 20:23

马黑黑 发表于 2024-9-7 20:08
正了

该正的正了

马黑黑 发表于 2024-9-7 21:18

花飞飞 发表于 2024-9-7 20:23
该正的正了

达到目的

花飞飞 发表于 2024-9-8 18:56

马黑黑 发表于 2024-9-7 21:18
达到目的

今天的三层立体也好看{:4_190:}

马黑黑 发表于 2024-9-8 21:05

花飞飞 发表于 2024-9-8 18:56
今天的三层立体也好看

还好吧
页: [1]
查看完整版本: 无穷大图标代码