湖心亭
本帖最后由 马黑黑 于 2024-1-29 12:19 编辑 <br /><br /><style>.papa { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/lake0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#btnplay { position: absolute; left: calc(50% - 80px); top: 20px; 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: 20px; bottom: -10px; --delay: -2.5s; }
.ipic:nth-of-type(2) { left: 380px; --delay: 0s; }
.ipic:nth-of-type(3) { left: 860px; bottom: -30px; --delay: -1.5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(3deg); } }
</style>
<div class="papa">
<audio src="https://music.163.com/song/media/outer/url?id=561211719" autoplay loop></audio>
<img class="ipic" src="https://638183.freep.cn/638183/small/h1.png" alt="" />
<img class="ipic" src="https://638183.freep.cn/638183/small/h2.png" alt="" />
<img class="ipic" src="https://638183.freep.cn/638183/small/h3.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>
帖子代码
<style>
.papa { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/lake0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#btnplay { position: absolute; left: calc(50% - 80px); top: 20px; 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: 20px; bottom: -10px; --delay: -2.5s; }
.ipic:nth-of-type(2) { left: 380px; --delay: 0s; }
.ipic:nth-of-type(3) { left: 860px; bottom: -30px; --delay: -1.5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(3deg); } }
</style>
<div class="papa">
<audio src="https://music.163.com/song/media/outer/url?id=561211719" autoplay loop></audio>
<img class="ipic" src="https://638183.freep.cn/638183/small/h1.png" alt="" />
<img class="ipic" src="https://638183.freep.cn/638183/small/h2.png" alt="" />
<img class="ipic" src="https://638183.freep.cn/638183/small/h3.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>
本帖JS封装适用于无歌词音画帖，要求：① 播放按钮标签 id="btnplay"；② animation 动画加入 CSS变量 var(--state) [参考 03 行 和 05行）。
论坛的引用，需要像代码中 22~25 行那样操作。自由web环境只需一句：
<script charset="utf-8" src="https://638183.freep.cn/638183/web/js/mpku_simple.js"></script> 如此简洁的代码，太棒了{:4_199:} 这画面也好清净啊，用skew去摇曳那些荷叶荷花儿，那么飘逸淡雅{:4_199:} 按钮又是鼠标触碰变色的，图形也和荷花一个系列呢。
忽然发现skew用来做摇曳真的好美啊。记得以前黑黑还用它们做过摇曳的小船儿，也好美的{:4_199:} 那么安静的地方，在这样的地方打坐修炼肯定很不错{:4_173:} 介个好美吖{:6_244:} 划个小船去采莲{:6_242:} 摆动的荷花和旋转的播放器非常美。背景有点像秋天呵{:4_173:} 樵歌 发表于 2024-1-29 15:35
摆动的荷花和旋转的播放器非常美。背景有点像秋天呵
数寒不是数完了么，然后春夏省略{:4_170:} 幸运草 发表于 2024-1-29 13:01
划个小船去采莲
支持 红影 发表于 2024-1-29 12:54
如此简洁的代码，太棒了
{:4_190:} 红影 发表于 2024-1-29 12:55
这画面也好清净啊，用skew去摇曳那些荷叶荷花儿，那么飘逸淡雅
看着好像也挺舒服{:4_173:} 红影 发表于 2024-1-29 12:58
那么安静的地方，在这样的地方打坐修炼肯定很不错
支持 好看，欣赏学习了！{:4_180:} 马黑黑 发表于 2024-1-29 17:00
数寒不是数完了么，然后春夏省略
跑得真快哇，连时间也追不上{:4_173:} 樵歌 发表于 2024-1-29 18:49
跑得真快哇，连时间也追不上
超光速了 亦是金 发表于 2024-1-29 18:26
好看，欣赏学习了！
晚上嚎
马黑黑 发表于 2024-1-29 17:01
简洁又漂亮，就是最高境界{:4_187:}