《美好清晨》（纯音乐） TO：樵歌 - 第2页 - 欢乐水吧 - 花潮论坛

红影发表于 2022-3-16 14:30

加林森发表于 2022-3-16 14:12
我终于发现问题在哪里了，就是宽度没有对，现在全部都对了。

嗯嗯，下回这个就不会错了呢。

加林森 发表于 2022-3-16 14:35

本帖最后由加林森于 2022-5-29 16:14 编辑 <br /><br />红影发表于 2022-3-16 14:30
嗯嗯，下回这个就不会错了呢。
就是就是，这个现在记得牢牢的了。

<style>
.stage{
   margin: auto;
   position: relative;
   left: -214px;
   width: 1024px;
   height: 610px;
   background:#666 url('https://pic.imgdb.cn/item/629328e809475431292ced67.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: 230px;
            left: 84px;
   transform-style: preserve-3d;
   animation: rot 5s linear infinite;
}
.circle div {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 1px solid #f0fcff;
   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 = 'http://www.kumeiwp.com/sub/filestores/2022/04/25/815b49884a9187d670f65a8385e40355.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-16 14:37

本帖最后由加林森于 2022-5-29 17:10 编辑 <br /><br />红影发表于 2022-3-16 14:30
学习的过程就这样，不断发现问题，解决问题。
就是就是。

<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: -214px;
   width: 1024px;
   height: 610px;
   background:#666 url('https://pic.imgdb.cn/item/629328e809475431292ced67.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="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, 30) + 'px';
   })
   meter.value = prog(aud.duration, aud.currentTime);
})

</script>

红影发表于 2022-3-16 18:35

加林森发表于 2022-3-16 14:35
就是就是，这个现在记得牢牢的了。

真不错，也是收获呢{:4_187:}

加林森 发表于 2022-3-16 18:39

红影发表于 2022-3-16 18:35
真不错，也是收获呢

说得好，就是这样的。{:4_204:}

红影发表于 2022-3-17 15:29

加林森发表于 2022-3-16 18:39
说得好，就是这样的。

很多时候多错几次肯定就学会了{:4_189:}

加林森 发表于 2022-3-17 16:51

红影发表于 2022-3-17 15:29
很多时候多错几次肯定就学会了

只要心里不嫌烦就行。

红影发表于 2022-3-17 18:28

加林森发表于 2022-3-17 16:51
只要心里不嫌烦就行。

嗯嗯，坚持就会胜利{:4_187:}

加林森 发表于 2022-3-17 19:01

红影发表于 2022-3-17 18:28
嗯嗯，坚持就会胜利

就是这个道理。

樵歌发表于 2022-3-18 11:49

加林森发表于 2022-3-15 16:50
@樵歌

来了来了，差点把礼给丢了{:4_176:}

樵歌发表于 2022-3-18 11:50

轻柔舒缓的音乐，听着人心情不知不觉就放松下来，真舒坦。谢谢队长{:4_176:}

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

樵歌发表于 2022-3-18 11:49
来了来了，差点把礼给丢了

哈哈，你终于发现了。收礼开心哈。{:4_190:}

加林森 发表于 2022-3-18 12:23

樵歌发表于 2022-3-18 11:50
轻柔舒缓的音乐，听着人心情不知不觉就放松下来，真舒坦。谢谢队长

这个就是你给我的那个歌曲，我去寻找了，有300首纯音乐呢。这个是其中1首，送给你的。{:4_176:}

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

加林森发表于 2022-3-18 12:21
哈哈，你终于发现了。收礼开心哈。

人满屏乱找，终于给我找到了{:4_174:}

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

加林森发表于 2022-3-18 12:23
这个就是你给我的那个歌曲，我去寻找了，有300首纯音乐呢。这个是其中1首，送给你的。

谢谢哈。{:4_190:}

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

樵歌发表于 2022-3-18 19:38
人满屏乱找，终于给我找到了

TO你了几天啦。{:4_189:}

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

樵歌发表于 2022-3-18 19:39
谢谢哈。

不客气。{:4_190:}

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

队长制作真漂亮！旋律真美！清爽的问候，温馨的祝愿，美妙的开端，樵哥哥收礼开心{:4_204:}

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

大猫咪发表于 2022-3-18 21:45
队长制作真漂亮！旋律真美！清爽的问候，温馨的祝愿，美妙的开端，樵哥哥收礼开心

谢谢猫猫的赞誉。{:4_179:}

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

加林森发表于 2022-3-18 21:29
TO你了几天啦。

我也知道怎么搞的艾特不显示，回帖也不直接跳转到当前页面框，回个帖子要找好久！{:4_201:}

页: 1 [2]

花潮论坛's Archiver