【黑师代码套用实例之1】《乘风》（有播放器，无歌词，1个动态效果）

花简静

花简静

《乘风》套用方法（有播放器，无歌词，1个动画）

把代码复制到点我→【黑师音画编辑器】

花简静

<style>
        .mybox {
        margin: 20px 0 20px calc(50% - 931px); （贴子位置，931数字可改。。方法：用你贴子一半加81）
        width: 1700px; （图片宽度，改成你的数据）
        height: 900px;（图片宽度，改成你的数据）
        top:130px; （top是上的意思，距离上方130个单位。加这句为了不遮头像）
        background: url('https://pic.imgdb.cn/item/65bb5195871b83018a1b8c69.webp'); （贴子背景，改成你自已的地址）
        box-shadow: 3px 3px 20px #000;
        position: relative;
        overflow: hidden; （这句不显示超出边缘部分。用视频时必须要。）
        z-index: 1;
        display: grid;
        place-items: center;
}
.mybox video {
        position: absolute;
        bottom: 0px;
        width: 1700px;
        height: 900px;
        object-fit: cover;
        border-radius: 50%;
        opacity: 1;
        mix-blend-mode:
        screen; opacity: .36;
}
#mplayer {
        position: absolute;
        bottom: 10px;
        width: 300px;
        text-align: center;
        color: lightyellow;
        z-index:9;
}
#mplayer::before {
        position: absolute;
        content: attr(data-tt);
        left: 0;
        bottom: 25px;
        width: 100%;
        text-align-last: justify; }
#mprog {
        width: 100%;
        accent-color: lightyellow;
        opacity: .9;
        outline: none;
        cursor: pointer; }
#btnplay {
        width:90px; （下方水晶球按纽宽度，可更改）
        height: 90px; （下方水晶球按纽高度，可更改）
        clip-path: circle(48%);
        opacity: .7;
        transition: filter .65s;
        cursor: pointer;
        animation: rot 5s linear infinite var(--state);
}
#btnplay:hover { filter: hue-rotate(300deg); }
@keyframes rot { to { transform: rotate(360deg);} }
</style>
<div class="mybox">
    <audio src="https://music.163.com/song/media/outer/url?id=2428557" autoplay loop></audio>（音乐地址。改成自己的）
    <div id="mplayer" data-tt="0:00 0:00">
        <img id="btnplay" src="https://pic.imgdb.cn/item/65bb3fac871b83018ae1a058.png" alt="" title="播放/暂停" /><br>（播放器水晶球的图片，改成自己的）
        <input id="mprog" type="range" min="0" max="100" step="any" value="0" />
    </div>
      <video src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4" loop></video>（视频地址。参照获取方法）
</div>
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

梦若心兰

感谢简静无私分享，再做图试试这个代码

花简静

梦若心兰 发表于 2024-2-3 19:27
感谢简静无私分享，再做图试试这个代码

好哒，期待你的作品哈。。

梦若心兰

花简静 发表于 2024-2-3 19:42
好哒，期待你的作品哈。。

谢谢静静，担心你失望

清梦

这个代码好好看，

清梦

问好静静，感谢分享