壳外
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sea.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.mpic-wrap { position: absolute; bottom: 65px; width: 200px; height: 200px; transform-style: preserve-3d; filter: drop-shadow(10px 10px 6px rgba(0,0,0,.95)); }
.mpic { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s; }
.mpic img { width: 100%; height: 100%; }
.mpic:nth-of-type(2) { transform: rotateY(-180deg); }
.mpic-wrap:hover .mpic:nth-of-type(1) { transform: rotateY(180deg); }
.mpic-wrap:hover .mpic:nth-of-type(2) { transform: rotateY(0); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2405811/00/02/05/5b4f95c2beae1.mp4" autoplay loop muted></video>
<div class="mpic-wrap">
<div class="mpic">
<img src="https://638183.freep.cn/638183/t22/hl/fish.gif" />
</div>
<div class="mpic">
<img id="p1" class="rot" src="https://638183.freep.cn/638183/small/webp/hdxk.webp" />
</div>
</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1991816681', '壳外']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
function tzRun() {
var aud = new AudPlayer(options);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sea.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.mpic-wrap { position: absolute; bottom: 65px; width: 200px; height: 200px; transform-style: preserve-3d; filter: drop-shadow(10px 10px 6px rgba(0,0,0,.95)); }
.mpic { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s; }
.mpic img { width: 100%; height: 100%; }
.mpic:nth-of-type(2) { transform: rotateY(-180deg); }
.mpic-wrap:hover .mpic:nth-of-type(1) { transform: rotateY(180deg); }
.mpic-wrap:hover .mpic:nth-of-type(2) { transform: rotateY(0); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2405811/00/02/05/5b4f95c2beae1.mp4" autoplay loop muted></video>
<div class="mpic-wrap">
<div class="mpic">
<img src="https://638183.freep.cn/638183/t22/hl/fish.gif" />
</div>
<div class="mpic">
<img id="p1" class="rot" src="https://638183.freep.cn/638183/small/webp/hdxk.webp" />
</div>
</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1991816681', '壳外']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
function tzRun() {
var aud = new AudPlayer(options);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
辅助小播实现方法请参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=95858 马老师上午好~~
今天天气很沉闷，希望这首音乐把雨给轰下来。这个小播一定会中奖！
感谢您的分享，恭祝秋安{:4_204:}{:4_190:}
构思新颖，小播别致，效果漂亮，示范精彩{:4_190:} 有趣，把翻转小图做成了播放器按钮。这个背景和音乐都很奇妙。
欣赏黑黑好帖{:4_199:} 黑黑老师昨晚晚餐也没吃过，今天就出帖子了，真不好意思。{:4_173:} 翻转的小播很有趣，效果特别赞。黑黑老师辛苦了！{:4_187:} 梦江南 发表于 2026-8-25 18:28
翻转的小播很有趣，效果特别赞。黑黑老师辛苦了！
{:4_190:} 梦江南 发表于 2026-8-25 18:26
黑黑老师昨晚晚餐也没吃过，今天就出帖子了，真不好意思。
好在俺是胖子，抗饿 红影 发表于 2026-8-25 16:05
有趣，把翻转小图做成了播放器按钮。这个背景和音乐都很奇妙。
欣赏黑黑好帖
{:4_180:} 杨帆 发表于 2026-8-25 12:05
构思新颖，小播别致，效果漂亮，示范精彩
{:4_180:} 霜染枫丹 发表于 2026-8-25 08:29
马老师上午好~~
今天天气很沉闷，希望这首音乐把雨给轰下来。这个小播一定会中奖！
{:4_173:} 马黑黑 发表于 2026-8-25 08:23
辅助小播实现方法请参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=95858
刚去看了这个新型的小播小辣椒还不会制作，直接套用玩一个吧{:4_198:} 小辣椒 发表于 2026-8-26 20:48
刚去看了这个新型的小播小辣椒还不会制作，直接套用玩一个吧
好的，用上更漂亮的图片就行 好帖劲赏{:4_199:} 风雨梦 发表于 2026-9-2 12:48
好帖劲赏
感谢支持！晚上好！
页:
[1]