情殇
<style>
#papa {
--state: paused;
margin: 30px auto;
left: -255px;
width: 1100px;
height: 700px;
border: 2px solid tan;
border-image: linear-gradient(35deg,PowDerBlue,Orchid,Indigo,Turquoise,red) 4;
background: #3C3A50 url('https://pic1.imgdb.cn/item/6443c2920d2dde577741984d.jpg') center/cover no-repeat;
box-shadow: 3px 8px 20px rgba(0,0,0,.6);
overflow: hidden;
display: grid;
place-items: center;
position: relative;
animation: hue 10s infinite alternate var(--state);
}
.circle {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid var(--bdcolor);
cursor: pointer;
}
@keyframes hue {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=77840" loop="loop" autoplay="autoplay"></audio>
<script>
let total = 60, spans = [];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Array.from({length: total}).forEach( (item) => {
let sp = document.createElement('span');
sp.className = 'circle';
let aX = Math.random() * 360, aY = Math.random() * 360, ww = Math.random() * 600 + 200, hh = Math.random() * 400 + 200;
papa.appendChild(sp);
spans.push(sp);
});
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);</script> 首席欣赏 画面好看好看，特效也好看。没声音呢 清舟朋友这件作品的色彩运用真有独到之处。 罗浮梦 发表于 2023-4-28 20:31
画面好看好看，特效也好看。没声音呢
是不是不能自动播放？点击一下试试呢 梦油 发表于 2023-4-28 20:32
清舟朋友这件作品的色彩运用真有独到之处。
伤也得伤个彩色的嘛{:4_173:} 都弄到像油画的水彩画里了 这底图好奇妙的感觉，加上变色，更觉巧妙。标题字也很别致。清舟好帖{:4_199:} 哇，漂亮，很震憾{:4_187:} 乍越整越伤人啊，我心软一看那字就吓{:4_170:}我大吃一斤 绿叶清舟 发表于 2023-4-28 20:39
伤也得伤个彩色的嘛
你很有创意 樵歌 发表于 2023-4-29 08:53
乍越整越伤人啊，我心软一看那字就吓我大吃一斤
人家真伤心呢，不来安慰下下就知道吃{:4_189:} 醉美水芙蓉 发表于 2023-4-29 07:04
欣赏清舟好帖！
谢谢芙蓉，节日好 朝云暮雨 发表于 2023-4-29 00:34
哇，漂亮，很震憾
谢谢朝云，节日好啊 红影 发表于 2023-4-28 23:00
这底图好奇妙的感觉，加上变色，更觉巧妙。标题字也很别致。清舟好帖
谢谢影，想不出用啥其他播放器就拿这个了 马黑黑 发表于 2023-4-28 21:29
都弄到像油画的水彩画里了
到底是啥画来着 梦油 发表于 2023-4-29 14:31
你很有创意
{:5_111:}怪不好意思的呢{:5_117:} 清舟这个好漂亮，我怎么漏看了，变色效果{:4_199:} 就是播放器我找了好久{:4_189:}