绿叶清舟 发表于 2023-4-28 20:07

情殇


<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:30

首席欣赏

罗浮梦 发表于 2023-4-28 20:31

画面好看好看,特效也好看。没声音呢

梦油 发表于 2023-4-28 20:32

清舟朋友这件作品的色彩运用真有独到之处。

绿叶清舟 发表于 2023-4-28 20:38

罗浮梦 发表于 2023-4-28 20:31
画面好看好看,特效也好看。没声音呢

是不是不能自动播放?点击一下试试呢

绿叶清舟 发表于 2023-4-28 20:39

梦油 发表于 2023-4-28 20:32
清舟朋友这件作品的色彩运用真有独到之处。

伤也得伤个彩色的嘛{:4_173:}

马黑黑 发表于 2023-4-28 21:29

都弄到像油画的水彩画里了

红影 发表于 2023-4-28 23:00

这底图好奇妙的感觉,加上变色,更觉巧妙。标题字也很别致。清舟好帖{:4_199:}

朝云暮雨 发表于 2023-4-29 00:34

哇,漂亮,很震憾{:4_187:}

醉美水芙蓉 发表于 2023-4-29 07:04

樵歌 发表于 2023-4-29 08:53

乍越整越伤人啊,我心软一看那字就吓{:4_170:}我大吃一斤

梦油 发表于 2023-4-29 14:31

绿叶清舟 发表于 2023-4-28 20:39
伤也得伤个彩色的嘛

你很有创意

绿叶清舟 发表于 2023-4-30 11:05

樵歌 发表于 2023-4-29 08:53
乍越整越伤人啊,我心软一看那字就吓我大吃一斤

人家真伤心呢,不来安慰下下就知道吃{:4_189:}

绿叶清舟 发表于 2023-4-30 11:06

醉美水芙蓉 发表于 2023-4-29 07:04
欣赏清舟好帖!

谢谢芙蓉,节日好

绿叶清舟 发表于 2023-4-30 11:06

朝云暮雨 发表于 2023-4-29 00:34
哇,漂亮,很震憾

谢谢朝云,节日好啊

绿叶清舟 发表于 2023-4-30 11:06

红影 发表于 2023-4-28 23:00
这底图好奇妙的感觉,加上变色,更觉巧妙。标题字也很别致。清舟好帖

谢谢影,想不出用啥其他播放器就拿这个了

绿叶清舟 发表于 2023-4-30 11:07

马黑黑 发表于 2023-4-28 21:29
都弄到像油画的水彩画里了

到底是啥画来着

绿叶清舟 发表于 2023-4-30 11:07

梦油 发表于 2023-4-29 14:31
你很有创意

{:5_111:}怪不好意思的呢{:5_117:}

小辣椒 发表于 2023-4-30 13:58

清舟这个好漂亮,我怎么漏看了,变色效果{:4_199:}

小辣椒 发表于 2023-4-30 14:02

就是播放器我找了好久{:4_189:}
页: [1] 2 3
查看完整版本: 情殇