绿叶清舟 发表于 2024-6-8 21:51

端午竞舟


<style>
#papa { margin: 20px 0 20px calc(50% - 633px); width: 1100px; height: 700px; background: url('https://p.upyun.com/demo/tmp/fqMOPd89.webp') 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);mix-blend-mode: hard-light;}
/* 画布样式 */
#canv { position: absolute; display: block; mix-blend-mode: screen; pointer-events: none; }
/* 视频样式 */
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 10px); object-fit: cover; pointer-events: none; mix-blend-mode: multiply; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5259955" autoplay loop></audio>
    <!-- 支持多个视频 -->
    <video class="vid" src="https://img.tukuppt.com/video_show/8321488/00/17/03/5eb7e5492f296.mp4" loop muted></video>
    <!-- 画布id必须是 id="canv" -->
    <canvas id="canv"></canvas>
    <img id="player" src="https://img1.baidu.com/it/u=2906374857,373642026&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" 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>

小辣椒 发表于 2024-6-8 23:03

清舟这个端午节的帖感觉很漂亮哦{:4_178:}

小辣椒 发表于 2024-6-8 23:04

加的效果真多{:4_199:}

小辣椒 发表于 2024-6-8 23:05

欣赏清舟的精彩制作，各种效果融合效果特别的美{:4_199:}

小辣椒 发表于 2024-6-8 23:05

祝福端午节安康！

红影 发表于 2024-6-8 23:19

这个效果用到这个帖子里特别奇妙，这些视频也恰当，清舟的构思很独特，很赞{:4_199:}

红影 发表于 2024-6-8 23:20

借清舟好帖祝大家端午安康{:4_204:}

樵歌 发表于 2024-6-9 06:46

那个巨大的水花是播放器，把一帮子人都穿越到古代去划龙舟了，{:4_189:}

梦油 发表于 2024-6-9 16:08

祝清舟朋友及家人端午安康！
页: [1]
查看完整版本: 端午竞舟