马黑黑 发表于 2023-5-4 20:24

css-doodle绘制光盘很简单

本帖最后由 马黑黑 于 2023-5-4 20:29 编辑 <br /><br /><style>
#mydiv > p { margin: 8px 0; }
#mydiv > pre { background: #eee; padding: 10px; }</style>
<div id="mydiv">   
        <p>
                绘制光盘，首先将元素的 border-radius 属性设置为50%，其次用角向渐变做元素的背景。在 css-doodle 里，如下几行代码就能模拟出一个七彩背景光盘：
        </p>   
        <pre contenteditable="true">&lt;css-doodle grid=&quot;1&quot;&gt;
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, cyan, blue, purple);
&lt;/css-doodle&gt;</pre>   
        <p>
                <button class="btn" type="button" value="">
                        查看效果
                </button>
        </p>   
        <div class="runbox">
        </div>   
        <p>
                以上模拟出来的光盘，颜色是逐渐过渡的，若我们需要两种颜色间有清晰的界线，新版 css-doodle 提供有一个 @stripe() 函数，它能将如上七彩色均等划分，从而达到各颜色之间有分明的界线：
        </p>   
        <pre contenteditable="true">&lt;css-doodle grid=&quot;1&quot;&gt;
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(@stripe(red, orange, yellow, green, cyan, blue, purple));
&lt;/css-doodle&gt;
    </pre>   
        <p>
                <button class="btn" type="button" value="">
                        查看效果
                </button>
        </p>   
        <div class="runbox">
        </div>   
        <p>
                上面的代码，与前面的代码相比，区别仅在于颜色包裹在了 css-doodle 函数 @stripe() 之内，亦即，各颜色实际上做了 @stripe() 函数的参数。@stripe() 函数是新版 css-doodle 生成条纹的函数，所需参数为颜色值，至少需要两个颜色，颜色后面可以加颜色占比属性值。例如：
        </p>   
        <pre contenteditable="true">&lt;css-doodle grid=&quot;1&quot;&gt;
    :doodle { @size: 60px; }
    border-radius: 50%;
    background: conic-gradient(@stripe(red 10%, green 30%, black 100%));
&lt;/css-doodle&gt;
    </pre>   
        <p>
                <button class="btn" type="button" value="">
                        查看效果
                </button>
        </p>   
        <div class="runbox">
        </div>   
        <p>
                @strike() 函数简化了CSS渐变的写法，仅此而已。
        </p>
</div>
<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('.btn'),
        runs = document.querySelectorAll('.runbox'),
        pres = document.querySelectorAll('#mydiv > pre');
btns.forEach((item,key) => {
        item.onclick = () => runs.innerHTML = pres.innerText;
});
</script>

梦缘 发表于 2023-5-4 20:26

谢谢老师的代码讲解，欣赏问好！{:4_187:}

马黑黑 发表于 2023-5-4 20:29

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

{:4_190:}

亦是金 发表于 2023-5-4 20:38

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

小辣椒 发表于 2023-5-4 20:50

个个精彩，漂亮

小辣椒 发表于 2023-5-4 20:52

但我电脑预览出来就代码{:4_203:}

亦是金 发表于 2023-5-4 21:14

小辣椒 发表于 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.innerHTML = pres.innerText;
});
</script>

就可以看见七彩光盘了！{:4_189:}

小辣椒 发表于 2023-5-4 21:17

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

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


好啊，我也是去试一下

小辣椒 发表于 2023-5-4 21:19

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

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


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

小辣椒 发表于 2023-5-4 21:23

这个光盘以前有玩过的

亦是金 发表于 2023-5-4 21:26

我没有试！{:5_111:}

马黑黑 发表于 2023-5-4 21:38

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

实现方式不一样

马黑黑 发表于 2023-5-4 21:38

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

用原生CSS也可以做到

小辣椒 发表于 2023-5-4 21:38

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

这个是js?

马黑黑 发表于 2023-5-4 21:39

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

方便时试试

马黑黑 发表于 2023-5-4 21:39

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

可能你需要刷新一下

马黑黑 发表于 2023-5-4 21:40

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

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

小辣椒 发表于 2023-5-4 21:41

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

现在看见了，是要刷新

马黑黑 发表于 2023-5-4 21:41

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

看标题

马黑黑 发表于 2023-5-4 21:42

小辣椒 发表于 2023-5-4 21:41
现在看见了，是要刷新
你的缓存多了，应隔一段时间清除一下缓存
页: [1] 2 3
查看完整版本: css-doodle绘制光盘很简单