这个也是用border做的
<div class="hE"><pre id="pre1"><style>
.cone {
--size: 160px;
--color: rgba(0,100,128,.6);
margin: 30px;
position: relative;
left: calc(50% - var(--size) / 2);
top: 20px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
}
.cone::before, .cone::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 50%;
}
.cone::after { transform: rotate(90deg); }
</style>
<div class="cone"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></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();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
这么少代码就能做出这样的图形啊 这个做播放器也是漂亮的 这跟那个小风车裁的方法不一样。居然有弧度出来，也是没想到。。。{:4_199:} 仔细看了一下，是因为加了border-radius: 50%;
边缘整体就弧形了。。
把这句给之前的风车加上。。
效果也好看 <style>
#mdiv {
--size: 200px;
--color: lightblue;
margin: 30px auto;
width: var(--size);
height: var(--size);
transition: 3s;
position: relative;
}
#mdiv::after {
position: absolute;
content: '';
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
}
#mdiv:hover { transform: rotate(360deg); }
#mdiv > span {
position: absolute;
left: calc(var(--size) / 4);
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
border-color: transparent var(--color) transparent transparent;
transform-origin: 100% 100%;
border-radius: 50%;
}
</style>
<div id="mdiv"></div>
<script>
Array(total = 7).fill('').forEach((s,k) => {
s = document.createElement('span');
s.style.transform = `rotate(${360 / total * k}deg)`;
s.style.setProperty('--color', `#${Math.random().toString().substring(2,8)}`);
mdiv.appendChild(s);
});
</script> 弧的位置不同。。移位后整体效果也不同。{:4_199:} 绿叶清舟 发表于 2024-9-6 19:41
这么少代码就能做出这样的图形啊
知识+想象力=无所不能 花飞飞 发表于 2024-9-6 20:12
#mdiv {
--size: 200px;
--color: lightblue;
这个满分 花飞飞 发表于 2024-9-6 20:12
弧的位置不同。。移位后整体效果也不同。
无限可能 小辣椒 发表于 2024-9-6 19:57
这个做播放器也是漂亮的
应该不错 马黑黑 发表于 2024-9-6 20:41
知识+想象力=无所不能
关键还是要知识了 马黑黑 发表于 2024-9-6 20:42
应该不错
是的，感觉很漂亮 小辣椒 发表于 2024-9-6 22:52
是的，感觉很漂亮
需要修饰一下吧 醉美水芙蓉 发表于 2024-9-6 21:26
欣赏老师漂亮的图图！
谢谢 绿叶清舟 发表于 2024-9-6 21:21
关键还是要知识了
那是自然，巧妇难为无米之炊
马黑黑 发表于 2024-9-6 20:42
这个满分
{:4_170:} 马黑黑 发表于 2024-9-6 20:42
无限可能
需要多多的时间来尝试{:4_173:}