css-doodle绘制光盘很简单

马黑黑

绘制光盘，首先将元素的 border-radius 属性设置为50%，其次用角向渐变做元素的背景。在 css-doodle 里，如下几行代码就能模拟出一个七彩背景光盘：

<css-doodle grid="1">
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, cyan, blue, purple);
</css-doodle>

查看效果

以上模拟出来的光盘，颜色是逐渐过渡的，若我们需要两种颜色间有清晰的界线，新版 css-doodle 提供有一个 @stripe() 函数，它能将如上七彩色均等划分，从而达到各颜色之间有分明的界线：

<css-doodle grid="1">
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(@stripe(red, orange, yellow, green, cyan, blue, purple));
</css-doodle>
    

查看效果

上面的代码，与前面的代码相比，区别仅在于颜色包裹在了 css-doodle 函数 @stripe() 之内，亦即，各颜色实际上做了 @stripe() 函数的参数。@stripe() 函数是新版 css-doodle 生成条纹的函数，所需参数为颜色值，至少需要两个颜色，颜色后面可以加颜色占比属性值。例如：

<css-doodle grid="1">
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(@stripe(red 10%, green 30%, black 100%));
</css-doodle>
    

查看效果

@strike() 函数简化了CSS渐变的写法，仅此而已。

梦缘

谢谢老师的代码讲解，欣赏问好！

马黑黑

梦缘 发表于 2023-5-4 20:26
谢谢老师的代码讲解，欣赏问好！

亦是金

谢谢老师的代码详细讲解，我觉得第一个七彩背景光盘好看！

小辣椒

个个精彩，漂亮

小辣椒

但我电脑预览出来就代码

亦是金

小辣椒 发表于 2023-5-4 20:52
但我电脑预览出来就代码

我将第一个光盘的代码后面，添加上代码
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('#papa > button'),
        pres = document.querySelectorAll('#papa > pre'),
        runboxes = document.querySelectorAll('#papa > .runbox');

btns.forEach((item,key) => {
        item.onclick = () => runboxes[key].innerHTML = pres[key].innerText;
});
</script>

就可以看见七彩光盘了！

小辣椒

亦是金 发表于 2023-5-4 21:14
我将第一个光盘的代码后面，添加上代码

let script = document.createElement('script');

好啊，我也是去试一下

小辣椒

亦是金 发表于 2023-5-4 21:14
我将第一个光盘的代码后面，添加上代码

let script = document.createElement('script');

再加首音乐链接看看会不会转动

小辣椒

这个光盘以前有玩过的

亦是金

我没有试！

马黑黑

小辣椒 发表于 2023-5-4 21:23
这个光盘以前有玩过的

实现方式不一样

马黑黑

亦是金 发表于 2023-5-4 20:38
谢谢老师的代码详细讲解，我觉得第一个七彩背景光盘好看！

用原生CSS也可以做到

小辣椒

马黑黑 发表于 2023-5-4 21:38
实现方式不一样

这个是js?

马黑黑

亦是金 发表于 2023-5-4 21:26
我没有试！

方便时试试

马黑黑

小辣椒 发表于 2023-5-4 20:52
但我电脑预览出来就代码

可能你需要刷新一下

马黑黑

小辣椒 发表于 2023-5-4 20:52
但我电脑预览出来就代码

或者点击一下“查看效果”按钮，点了之后会在下面运行你看到的代码

小辣椒

马黑黑 发表于 2023-5-4 21:40
或者点击一下“查看效果”按钮，点了之后会在下面运行你看到的代码

现在看见了，是要刷新

马黑黑

小辣椒 发表于 2023-5-4 21:38
这个是js?

看标题

马黑黑

小辣椒 发表于 2023-5-4 21:41
现在看见了，是要刷新

你的缓存多了，应隔一段时间清除一下缓存