论坛 › 欢乐水吧 › 《大自然的心声》（纯音乐欣赏）

加林森 发表于 2022-5-19 13:23

《大自然的心声》（纯音乐欣赏）

<style>
.stage{
        margin: auto;
        position: relative;
        left: -305px;
        width: 1200px;
        height: 800px;
        background:#666 url('https://pic.imgdb.cn/item/6285d232094754312960131c.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: 140px;
               left: 84px;
        transform-style: preserve-3d;
        animation: rot 5s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid Blue;
        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://www.joy127.com/url/89809.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-5-19 15:34

加林森朋友下午好！海、山、云……骋怀游目、一望无际，这幅图真美。

醉美水芙蓉 发表于 2022-5-19 16:52

加林森 发表于 2022-5-19 16:53

梦油 发表于 2022-5-19 15:34
加林森朋友下午好！海、山、云……骋怀游目、一望无际，这幅图真美。

谢谢老梦。这个纯音乐挺好听的。

加林森 发表于 2022-5-19 16:56

醉美水芙蓉 发表于 2022-5-19 16:52
欣赏学习队长佳作！

谢谢水芙蓉支持!{:4_204:}

梦油 发表于 2022-5-19 17:21

加林森 发表于 2022-5-19 16:53
谢谢老梦。这个纯音乐挺好听的。

是的，音乐也挺好。

加林森 发表于 2022-5-19 17:47

梦油 发表于 2022-5-19 17:21
是的，音乐也挺好。

嗯嗯，谢谢啦！

马黑黑 发表于 2022-5-19 19:30

大自然的心声，给力

大猫咪 发表于 2022-5-19 19:42

画面真漂亮， 队长好分享，现在阴真舒服   赞！

{:4_187:}{:4_199:}

加林森 发表于 2022-5-19 19:42

马黑黑 发表于 2022-5-19 19:30
大自然的心声，给力

嗯嗯。老黑晚上好！{:4_191:}

加林森 发表于 2022-5-19 19:46

大猫咪 发表于 2022-5-19 19:42
画面真漂亮， 队长好分享，现在阴真舒服   赞！

是的，我去专门找的图片，然后再修改图片的像素，最后再制作的。{:4_204:}{:4_190:}

红影 发表于 2022-5-19 20:02

制作漂亮，音乐好听。欣赏队长好帖{:4_187:}

马黑黑 发表于 2022-5-19 20:02

加林森 发表于 2022-5-19 19:42
嗯嗯。老黑晚上好！

{:4_181:}

大猫咪 发表于 2022-5-19 20:07

加林森 发表于 2022-5-19 19:46
是的，我去专门找的图片，然后再修改图片的像素，最后再制作的。

辛苦了 {:4_187:} 音乐画面都很棒 {:4_204:}

加林森 发表于 2022-5-19 20:13

大猫咪 发表于 2022-5-19 20:07
辛苦了音乐画面都很棒

嗯嗯，我自己感到也很满意了。{:4_204:}{:4_190:}

加林森 发表于 2022-5-19 20:18

红影 发表于 2022-5-19 20:02
制作漂亮，音乐好听。欣赏队长好帖

谢谢红影！{:4_204:}

加林森 发表于 2022-5-19 20:18

马黑黑 发表于 2022-5-19 20:02


{:4_191:}干杯！

大猫咪 发表于 2022-5-19 20:24

加林森 发表于 2022-5-19 20:13
嗯嗯，我自己感到也很满意了。

{:4_179:}队长越做越棒了   

小辣椒 发表于 2022-5-19 20:52

队长这个图图的标题字以后你可以下面一点。这个图比较大，下面空间很多的

小辣椒 发表于 2022-5-19 20:53

队长确实图图进步许多了，赞的{:4_187:}

查看完整版本: 《大自然的心声》（纯音乐欣赏）