湖心亭

马黑黑 · 发表于 2024-1-29 12:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-29 12:19 编辑

马黑黑 · 发表于 2024-1-29 12:20

帖子代码

<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>

复制代码

马黑黑 · 发表于 2024-1-29 12:32

本帖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>