流水光阴 发表于 2024-1-30 13:59

钢琴曲欣赏---学习帖


<style>
.papa { margin: 120px 0 0 calc(50% - 881px); width: 1600px; height: 950px; background: url('https://pic.imgdb.cn/item/65b88e9b871b83018afd396c.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#btnplay { position: absolute; left: calc(70% - 80px); top: 80px; mix-blend-mode: normal; filter: hue-rotate(180deg); transition: filter 1s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(280deg); }
.ipic { position: absolute; bottom: 0; transform: skew(-3deg); transform-origin: bottom center; animation: skew 3s var(--delay) infinite alternate var(--state); }
.ipic:nth-of-type(1) { left: 120px; bottom: -10px; --delay: -2.5s; }
.ipic:nth-of-type(2) { left: 780px; --delay: 0s; }
.ipic:nth-of-type(3) { left: 1260px; bottom: -30px; --delay: -1.5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(3deg); } }

#papa video {
        position: absolute;
        width: 90%;
        height: 92%;
                top: 0px; left: 0px;
                object-fit: cover;
        transform: scale(-1,1);
        mix-blend-mode: screen;
               opacity: .5;
}

</style>

<div class="papa">

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f1032eee1f.mp4" muted loop></video>
        <audio src="https://music.163.com/song/media/outer/url?id=1978555093" autoplay loop></audio>
        <img class="ipic" src="https://pic.imgdb.cn/item/65b88ed5871b83018afdde5f.png" alt="" />
        <img class="ipic" src="https://pic.imgdb.cn/item/65b88ef2871b83018afe35c1.png" alt="" />
        <img class="ipic" src="https://pic.imgdb.cn/item/65b88ec1871b83018afda390.png" alt="" />
        <img id="btnplay" src="https://638183.freep.cn/638183/small/hbtn1.png" alt="" title="play" />
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/mpku_simple.js';
document.querySelector('body').appendChild(sf);
</script>
<br><br><br><br><br><br><br><br><br><br>

流水光阴 发表于 2024-1-30 14:00

学习做个作业，许多不会

红影 发表于 2024-1-30 16:33

画面好美，选取的摇曳的花儿也好漂亮。欣赏流水光阴好帖{:4_199:}

红影 发表于 2024-1-30 16:33

这个古色古香的，清新淡雅，很赞{:4_187:}

梦油 发表于 2024-1-30 16:45

欣赏美曲，问候光阴。

幸运草 发表于 2024-1-31 10:34

好看{:6_244:}

世外桃源 发表于 2024-2-2 11:35

必须顶，小妞加油{:4_178:}

流水光阴 发表于 2024-2-17 16:40

红影 发表于 2024-1-30 16:33
画面好美，选取的摇曳的花儿也好漂亮。欣赏流水光阴好帖

谢谢美女领导欣赏，向你学习{:4_171:}

流水光阴 发表于 2024-2-17 16:41

红影 发表于 2024-1-30 16:33
这个古色古香的，清新淡雅，很赞

有美女领导的赞美就是有动力了{:4_204:}

流水光阴 发表于 2024-2-17 16:42

梦油 发表于 2024-1-30 16:45
欣赏美曲，问候光阴。

谢谢梦油好朋友支持{:4_187:}

流水光阴 发表于 2024-2-17 16:42

幸运草 发表于 2024-1-31 10:34
好看

谢谢草儿{:4_171:}

流水光阴 发表于 2024-2-17 16:42

世外桃源 发表于 2024-2-2 11:35
必须顶，小妞加油

谢谢桃园，有你的支持就有动力了{:4_187:}

三月的阳光 发表于 2024-2-17 18:18

欣赏流水光阴漂亮美帖~~{:4_187:}

梦油 发表于 2024-2-18 14:50

流水光阴 发表于 2024-2-17 16:42
谢谢梦油好朋友支持

流水朋友别客气。

愤怒的葡萄 发表于 2024-2-18 20:00

帖子制作得挺漂亮的，钢琴曲也挺好听的，感谢楼主的无私分享。
页: [1]
查看完整版本: 钢琴曲欣赏---学习帖