David Gilmour - Rattle That Lock

马黑黑

David Gilmour - Rattle That Lock

马黑黑

光盘并不转，只变色。对不支持背景角向渐变的浏览器，则会看到单纯的颜色变化，否则会看到好像光盘在旋转的效果。

马黑黑

音乐控制按钮代码：

<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 = '音乐地址';
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: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
是啊，象个光碟的

马黑黑

绿叶清舟 发表于 2022-3-31 20:06
俺切换里吸有IE5-11的

那是ie内核的。你知道，连微软都抛弃ie了，你还要遨游干嘛

红影

这个小光盘好漂亮啊

马黑黑

红影 发表于 2022-3-31 20:42
这个小光盘好漂亮啊

我还以为我发多余了呢

红影

马黑黑 发表于 2022-3-31 20:45
我还以为我发多余了呢

怎么会。这也是按键可以停止的呢，太漂亮了

马黑黑

红影 发表于 2022-3-31 20:48
怎么会。这也是按键可以停止的呢，太漂亮了

嗯，就是代码略多了一些

绿叶清舟

马黑黑 发表于 2022-3-31 20:16
那是ie内核的。你知道，连微软都抛弃ie了，你还要遨游干嘛

那会换电脑第一个想到的就是这个浏览器啊，就下载了

加林森

好漂亮的小光盘，把它放进帖子肯定更加好看。

红影

马黑黑 发表于 2022-3-31 20:48
嗯，就是代码略多了一些

还行，不算多呢