David Gilmour - Rattle That Lock
<p style="font: bold 2em / 2em Sans-serif; color: olive;">David Gilmour - Rattle That Lock</p><style type="text/css">
#circleDiv { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0px 0px 2px #000; cursor: pointer; }
</style>
<div id="circleDiv"></div>
<script language="javascript">
let cc = document.getElementById('circleDiv');
let aud = document.createElement('audio');
let tt;
aud.loop = true;
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/31/13cacdff54400b3b9f7f64dde1ba1991.mp3';
cc.appendChild(aud);
merge();
autoPlay();
cc.onclick = function() { autoPlay(); }
function merge(){
let num = 45;
let bgStr = 'conic-gradient(';
for(j=0; j<360/num; j++) {
bgStr += `#${Math.random().toString(16).substr(-6)} ${j*num}deg,`;
}
bgStr = bgStr.slice(0, bgStr.length-1) + ")";
cc.style.background = `#${Math.random().toString(16).substr(-6)} ${bgStr}`;
}
function autoPlay() { aud.paused == true ? (tt = setInterval(merge, 100), aud.play()) : (clearInterval(tt), aud.pause()); }
</script>
光盘并不转，只变色。对不支持背景角向渐变的浏览器，则会看到单纯的颜色变化，否则会看到好像光盘在旋转的效果。 本帖最后由 马黑黑 于 2022-3-31 19:08 编辑 <br /><br /><p>音乐控制按钮代码：</p>
<pre style="font-size: 12px;">
<style type=<span style='color: magenta'>"text/css"</span>>
<span style='color: red;'>#circleDiv </span>{ <span style='color: blue;'>width</span>: 30px; <span style='color: blue;'>height</span>: 30px; <span style='color: blue;'>border-radius</span>: 50%; <span style='color: blue;'>box-shadow</span>: 0px 0px 2px #000; <span style='color: blue;'>cursor</span>: pointer; }
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"circleDiv"</span>><<span style='color: darkred'>/div</span>>
<script language=<span style='color: magenta'>"javascript"</span>>
<span style='color: blue'>let</span> cc = <span style='color: red'>document</span>.getElementById(<span style='color: magenta'>'circleDiv'</span>);
<span style='color: blue'>let</span> aud = <span style='color: red'>document</span>.createElement(<span style='color: magenta'>'audio'</span>);
<span style='color: blue'>let</span> tt;
aud.loop = true;
aud.src = <span style='color: magenta'>'音乐地址'</span>;
cc.appendChild(aud);
merge();
autoPlay();
cc.onclick = <span style='color: blue'>function</span>() { autoPlay(); }
<span style='color: blue'>function</span> merge(){
<span style='color: blue'>let</span> num = 45;
<span style='color: blue'>let</span> bgStr = <span style='color: magenta'>'conic-gradient('</span>;
<span style='color: blue'>for</span>(j=0; j<360/num; j++) {
bgStr += `#${<span style='color: red'>Math</span>.random().toString(16).substr(-6)} ${j*num}deg,`;
}
bgStr = bgStr.slice(0, bgStr.length-1) + <span style='color: magenta'>")"</span>;
cc.style.background = `#${<span style='color: red'>Math</span>.random().toString(16).substr(-6)} ${bgStr}`;
}
<span style='color: blue'>function</span> autoPlay() { aud.paused == true ? (tt = setInterval(merge, 100), aud.play()) : (clearInterval(tt), aud.pause()); }
</script>
</pre> 这个用系统自带的那个能看到，傲游还是看不到了 很炫酷的效果啊 马黑黑 发表于 2022-3-31 19:03
光盘并不转，只变色。对不支持背景角向渐变的浏览器，则会看到单纯的颜色变化，否则会看到好像光盘在旋转的 ...
俺的傲游只看到外面一个园里面的颜色都看不到 绿叶清舟 发表于 2022-3-31 19:46
这个用系统自带的那个能看到，傲游还是看不到了
遨游应该不行 绿叶清舟 发表于 2022-3-31 19:47
很炫酷的效果啊
颜色丰富 绿叶清舟 发表于 2022-3-31 19:47
俺的傲游只看到外面一个园里面的颜色都看不到
遨游好像有多个内核，必须用 webkit 内核才行 马黑黑 发表于 2022-3-31 19:58
遨游好像有多个内核，必须用 webkit 内核才行
俺切换里吸有IE5-11的 马黑黑 发表于 2022-3-31 19:57
颜色丰富
是啊，象个光碟的 绿叶清舟 发表于 2022-3-31 20:07
是啊，象个光碟的
{:5_108:} 绿叶清舟 发表于 2022-3-31 20:06
俺切换里吸有IE5-11的
那是ie内核的。你知道，连微软都抛弃ie了，你还要遨游干嘛 这个小光盘好漂亮啊{:4_187:} 红影 发表于 2022-3-31 20:42
这个小光盘好漂亮啊
我还以为我发多余了呢 马黑黑 发表于 2022-3-31 20:45
我还以为我发多余了呢
怎么会。这也是按键可以停止的呢，太漂亮了{:4_199:} 红影 发表于 2022-3-31 20:48
怎么会。这也是按键可以停止的呢，太漂亮了
嗯，就是代码略多了一些 马黑黑 发表于 2022-3-31 20:16
那是ie内核的。你知道，连微软都抛弃ie了，你还要遨游干嘛
那会换电脑第一个想到的就是这个浏览器啊，就下载了 好漂亮的小光盘，把它放进帖子肯定更加好看。 马黑黑 发表于 2022-3-31 20:48
嗯，就是代码略多了一些
还行，不算多呢{:4_173:}
页:
[1]
2