朵拉 发表于 2023-12-20 20:50

阿拉斯加海湾（马黑黑原创）

本帖最后由 朵拉 于 2023-12-20 21:15 编辑 <br /><br /><style> #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6582e3b2c458853aefc4c085.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; }
.mypic { position: absolute; width: 150px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 20px; }
.mypic:nth-of-type(2) { top: 20px; width: 200px; }
.mypic:nth-of-type(3) { right: 20px; }
#vid { position: absolute; width: 1024px; height: 740px; top:-100px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/60/33/638ee6ad2b3ff.mp4" autoplay="" loop="" muted=""></video>
      <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.sv" alt="" />
      <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
      <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.sv" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1500569811" autoplay loop></audio>
</div>

<script>

let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
      LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '.mypic',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
      });
};

let geci = [
      
];

</script>

朵拉 发表于 2023-12-20 21:19

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}
附：适配的歌词没找好，继续寻找中~~{:6_225:}

马黑黑 发表于 2023-12-20 22:07

朵拉 发表于 2023-12-20 21:19
@马黑黑
马师 晚上好，学生交作业，请指正哈
附：适配的歌词没找好，继续寻找中~~

歌词其实可以自己制作，花一点点时间

红影 发表于 2023-12-20 22:29

这个播放器按钮和视屏都是黑黑原帖子里的呢{:4_173:}

世外桃源 发表于 2023-12-20 22:29

欣赏欣赏
页: [1]
查看完整版本: 阿拉斯加海湾（马黑黑原创）