林姗姗 - 连锁反应【学习黑黑老师播放器效果】
本帖最后由 岩新新 于 2023-6-20 21:11 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1910694">
<style>
#mydiv {width: 1400px;height: 740px;background: url('https://pan.111t.net/view.php/ead7da33c7b7700f172e40bf0236bd95.gif') no-repeat center/cover;box-shadow: 0 0 6px 0 #000;overflow: hidden;position: relative;margin: 0 0 0 calc(50% - 793px);--opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6); --state: paused;}
#btn {display: block;width: 30px;height: 30px;transform: translate(660px,690px);border-radius: 50%;border: 2px solid var(--bgcolor);cursor: pointer;position: absolute;}
#btn:hover { --bgcolor: rgba(255,255,255,.9); }
#btn::before, #btn::after {position: absolute;content: '';width: 100%;height: 100%;background: var(--bgcolor);transition: .25s;}
#btn::before {clip-path: polygon(35% 25%, 35% 75%, 80% 50%);opacity: var(--opa1);}
#btn::after {clip-path: polygon(30% 30%,30% 70%,45% 70%,45% 30%, 30% 30%,55% 30%,55% 70%,70% 70%,70% 30%);opacity: var(--opa2);}
.plane {display: block;width: 80px;height: 60px;left: 20px;top: 30px;background: linear-gradient(lightgreen,green,lightgreen);opacity: .8;clip-path: polygon(0 0,20% 50%,0 100%,100% 50%);offset-path: path('M20 30 h1004 30');offset-distance: 0%;position: absolute;animation: fly 40s var(--delay) infinite linear var(--state);--delay: 0s;}
.plane:nth-of-type(2), .plane:nth-of-type(4) { --delay: -10s; }
.plane:nth-of-type(3), .plane:nth-of-type(4) {transform: translateY(510px);opacity: .6;}
@keyframes fly { to { offset-distance: 100%; } }
</style>
<div id="mydiv">
<span id="btn"></span>
<span class="plane"></span>
<span class="plane"></span>
<span class="plane"></span>
<span class="plane"></span>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/06/18/54d4e26ddff51c96e3a5b9bd6bb62cac.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let setProp = (ele,vals) => vals.forEach((item,key) => ele.style.setProperty(item, item));
let mState = () => { let ar = aud.paused ? [['--opa1','1'],['--opa2','0'],['--state','paused']] : [['--opa1','0'],['--opa2','1'],['--state','running']]; setProp(mydiv,ar); };
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</td></tr></table> 漂亮的制作，这小飞机的尖角倒是和播放器图标很呼应。欣赏新新好帖{:4_187:} 动图好卡，你这个不要加外套上传，直接代码可以发的 小辣椒 发表于 2023-6-20 20:49
动图好卡，你这个不要加外套上传，直接代码可以发的
动图文件大打开慢！ 岩新新 发表于 2023-6-20 21:12
动图文件大打开慢！
太大会卡，不够流畅了 问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_185:}
页:
[1]