加林森 发表于 2022-6-24 11:19

《月亮代表我的心》- 群星（钢琴曲）

本帖最后由 加林森 于 2022-6-24 11:23 编辑 <br /><br /><style>
.stage{
        margin: auto;
        position: relative;
        left: -302px;
        width: 1200px;
        height: 757px;
        background: #666 url('https://pic.imgdb.cn/item/62b51d620947543129ff4aea.jpg') no-repeat center/cover;
        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);
        left: 120px;
      bottom: 120px;
        transform-style: preserve-3d;
        animation: rot 5s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid skyblue;
        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/06/22/51b5fb7c7fd4e683fcc3ce270afc7a9e.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-6-24 11:23

我喜欢你选的这支曲子。特别是用钢琴演奏这支歌曲，就更增加了它的神韵。

加林森 发表于 2022-6-24 11:24

梦油 发表于 2022-6-24 11:23
我喜欢你选的这支曲子。特别是用钢琴演奏这支歌曲，就更增加了它的神韵。

是的。挺好听的。

红影 发表于 2022-6-24 13:39

队长在复习线圈按钮啊，这个做得很漂亮，赞{:4_199:}

梦油 发表于 2022-6-24 13:58

加林森 发表于 2022-6-24 11:24
是的。挺好听的。

希望你多学一些红歌老曲。

加林森 发表于 2022-6-24 14:14

红影 发表于 2022-6-24 13:39
队长在复习线圈按钮啊，这个做得很漂亮，赞

是的。温故知新嘛。

加林森 发表于 2022-6-24 14:14

梦油 发表于 2022-6-24 13:58
希望你多学一些红歌老曲。

好的。

红影 发表于 2022-6-24 14:38

加林森 发表于 2022-6-24 14:14
是的。温故知新嘛。

看到这里面的GIF动图，想起来不仅视频可以妆点图片，动图也可以的。

梦油 发表于 2022-6-24 15:18

加林森 发表于 2022-6-24 14:14
好的。

期待着你的佳作。

加林森 发表于 2022-6-24 16:00

红影 发表于 2022-6-24 14:38
看到这里面的GIF动图，想起来不仅视频可以妆点图片，动图也可以的。

是的。都可以放进去的。

加林森 发表于 2022-6-24 16:00

梦油 发表于 2022-6-24 15:18
期待着你的佳作。

会的。

红影 发表于 2022-6-24 16:24

加林森 发表于 2022-6-24 16:00
是的。都可以放进去的。

而且有动态妆点，觉得效果更好呢。

加林森 发表于 2022-6-24 17:01

红影 发表于 2022-6-24 16:24
而且有动态妆点，觉得效果更好呢。

这个得去找到才行。

梦油 发表于 2022-6-24 17:42

加林森 发表于 2022-6-24 16:00
会的。

好的，俺等着。

加林森 发表于 2022-6-24 17:48

梦油 发表于 2022-6-24 17:42
好的，俺等着。

好的。
页: [1]
查看完整版本: 《月亮代表我的心》- 群星（钢琴曲）