《默》 -- 简弘亦 TO：东篱闲人 - 第2页 - 欢乐水吧 - 花潮论坛

红影发表于 2022-3-18 14:56

加林森发表于 2022-3-18 13:57
就是，放个鹰进来玩。

嗯嗯，这个场景加个鹰特别好呢{:4_187:}

加林森 发表于 2022-3-18 15:08

本帖最后由加林森于 2022-5-29 18:01 编辑 <br /><br />红影发表于 2022-3-18 14:56
嗯嗯，这个场景加个鹰特别好呢
就是，山高水长，雄鹰展翅飞翔。

<style>
.stage{
margin: auto;
position: relative;
left: -305px;
width: 1200px;
height: 550px;
background:#666 url('https://pic.imgdb.cn/item/6284edbf09475431298d3c74.jpg');
perspective: 3000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
right: 20px;
top: 80px;
left: 84px;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.circle div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid DeepPink;
border-radius: 50%;
padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
0%{ transform: rotateZ(30deg) rotateY(0turn);}
100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'https://music.163.com/song/media/outer/url?id=1932465780.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

东篱闲人 发表于 2022-3-18 15:24

加林森发表于 2022-3-18 13:56
谢谢老兄支持！

坚决支持，不遗余力。。。{:5_112:}

加林森 发表于 2022-3-18 15:37

本帖最后由加林森于 2022-5-29 19:20 编辑 <br /><br />东篱闲人发表于 2022-3-18 15:24
坚决支持，不遗余力。。。
好的好的。。。喝水{:4_176:}
<style>
.mama { left: -280px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 120px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: -160px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>

<div class="mama">
   <div class="wrap"></div>
   <img src="https://pic.imgdb.cn/item/629328e809475431292ced67.jpg">
   <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/25/815b49884a9187d670f65a8385e40355.mp3" autoplay="autoplay" loop="loop"></audio>

</div>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
   ele = document.createElement('span');
   ele.className = 'sskey';
   ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
   wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
   Array.from(sskey).forEach((ele) => {
            ele.style.height = num(10, 60) + 'px';
   })
   meter.value = prog(aud.duration, aud.currentTime);
})

</script>

东篱闲人 发表于 2022-3-18 15:40

加林森发表于 2022-3-18 15:37
好的好的。。。喝水

喝！{:4_176:}

加林森 发表于 2022-3-18 15:41

东篱闲人发表于 2022-3-18 15:40
喝！

干！{:4_176:}

红影发表于 2022-3-18 19:25

加林森发表于 2022-3-18 15:08
就是，山高水长，雄鹰展翅飞翔。

觉得这个做成背景移动的肯定更好看{:4_187:}

加林森 发表于 2022-3-18 19:26

红影发表于 2022-3-18 19:25
觉得这个做成背景移动的肯定更好看

要不我去试一试？

樵歌发表于 2022-3-18 19:48

加林森发表于 2022-3-18 13:58
嗯嗯，是啊。

队长用得得心应手了呵

加林森 发表于 2022-3-18 21:26

本帖最后由加林森于 2022-5-29 17:24 编辑 <br /><br />樵歌发表于 2022-3-18 19:48
队长用得得心应手了呵
谢谢樵歌支持。{:4_190:}

<style>
.mama { left: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>
<style>
.stage{
margin: auto;
position: relative;
left: -305px;
width: 1200px;
height: 550px;
background:#666 url('https://pic.imgdb.cn/item/6284edbf09475431298d3c74.jpg');
perspective: 3000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
<div class="mama">
   <div class="wrap"></div>
   <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33933040.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
   ele = document.createElement('span');
   ele.className = 'sskey';
   ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
   wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
   Array.from(sskey).forEach((ele) => {
            ele.style.height = num(20, 60) + 'px';
   })
   meter.value = prog(aud.duration, aud.currentTime);
})

</script>

大猫咪 发表于 2022-3-18 21:27

队长制作越来越棒了，图美歌靓，真棒！晚上好{:4_204:}{:4_190:}

加林森 发表于 2022-3-18 21:36

大猫咪发表于 2022-3-18 21:27
队长制作越来越棒了，图美歌靓，真棒！晚上好

猫猫晚上好。{:4_204:}
谢谢猫猫的点评。{:4_171:}{:4_190:}

大猫咪 发表于 2022-3-18 21:38

加林森发表于 2022-3-18 21:36
猫猫晚上好。
谢谢猫猫的点评。

队长{:4_179:}

加林森 发表于 2022-3-18 21:40

大猫咪发表于 2022-3-18 21:38
队长

猫猫{:4_179:}

樵歌发表于 2022-3-19 07:29

加林森发表于 2022-3-18 21:26
谢谢樵歌支持。

早上好呵{:4_190:}

红影发表于 2022-3-19 09:06

加林森发表于 2022-3-18 19:26
要不我去试一试？

看到了，你咋把鹰弄没了{:4_173:}

页: 1 [2]

花潮论坛's Archiver