冬天的秘密（马黑黑原创） TO：岁月老师
本帖最后由 朵拉 于 2024-5-3 12:41 编辑 <br /><br /><style>#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/663467f50ea9cb1403e1523a.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#player { position: absolute; width: 200px; left: calc(50% - 100px); top: calc(50% - 100px); cursor: pointer; pointer-events: auto; animation: rot 6s linear infinite var(--state); }
/* 画布样式 */
#canv { position: absolute; display: block; mix-blend-mode: screen; pointer-events: none; }
/* 视频样式 */
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2104715776" autoplay loop></audio>
<!-- 支持多个视频 -->
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video>
<!-- 画布id必须是 id="canv" -->
<canvas id="canv"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t24/leaf/5l.png" alt="" />
</div>
<script>
var pa = papa; //指定帖子元素id
//加载粒子特效资源
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/emmiter.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
//播放按钮点击事件
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑
老师 五一快乐，学生交作业，请指正哈{:4_190:} 本帖最后由 朵拉 于 2024-5-3 12:47 编辑
@走过岁月
祝岁月老师及家人 五一快乐，天天快乐~~{:4_204:}{:4_204:}
感谢您一直以来的鼓励和支持，学生努力学习哈~~{:4_190:}{:4_190:} 我的沙发，坐上 图图意境很美 穿梭的粒子衬托这秘密的深邃 制作很棒，赞朵拉 谢谢朵拉的礼物，也祝你和家人五一快乐，天天快乐！{:4_204:} 图图选得不错。欣赏朵宝好帖{:4_204:} {:4_199:}
页:
[1]