论坛 › 音乐沙龙 › 惠风和畅

马黑黑 发表于 2023-6-14 13:05

惠风和畅

<style>
#mydiv {width: 1024px;height: 640px;background: url('https://638183.freep.cn/638183/t23/2/dcyk.jpg') no-repeat center/cover;box-shadow: 0 0 6px 0 #000;overflow: hidden;position: relative;margin: 0 0 0 calc(50% - 593px);--opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6); --state: paused;}
#btn {display: block;width: 30px;height: 30px;transform: translate(497px,590px);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="https://music.163.com/song/media/outer/url?id=1364646699" 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>

马黑黑 发表于 2023-6-14 13:06

帖子代码

<style>
#mydiv {
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/2/dcyk.jpg') no-repeat center/cover;
        box-shadow: 0 0 6px 0 #000;
        overflow: hidden;
        position: relative;
        margin: 30px auto;
        --opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6); --state: paused;
}
#btn {
        display: block;
        width: 30px;
        height: 30px;
        transform: translate(497px,590px);
        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="https://music.163.com/song/media/outer/url?id=1364646699" 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>

红影 发表于 2023-6-14 15:11

漂亮，这画面很清净，音乐也好听，这地方挺适合修炼的{:4_173:}

红影 发表于 2023-6-14 15:15

这个播放器按钮和小飞机都是用 clip-path: polygon()做出来的呢，这个是很纯粹的css+html+js呢。{:4_199:}

红影 发表于 2023-6-14 15:17

4个小飞机是用一组nth-of-type( ) 做出来的，开始还以为是倒影弄的。不过这个好，倒影在有些电脑上显示不了的{:4_187:}

红影 发表于 2023-6-14 15:21

用透明度来显示出暂停或播放图标，这个做法很聪明{:4_199:}

醉美水芙蓉 发表于 2023-6-14 17:20

小辣椒 发表于 2023-6-14 17:27

黑黑 这个飞机是不是用的路径啊

小辣椒 发表于 2023-6-14 17:28

现在只能套用了{:4_170:}

马黑黑 发表于 2023-6-14 18:18

小辣椒 发表于 2023-6-14 17:28
现在只能套用了

{:4_190:}

樵歌 发表于 2023-6-14 18:57

请发定位来，俺要去那露营钓鱼悠闲一个夏天{:4_189:}

梦缘 发表于 2023-6-14 20:26

问好老师，欣赏精彩视频佳作，谢谢分享，点赞！{:4_190:}

马黑黑 发表于 2023-6-14 20:46

梦缘 发表于 2023-6-14 20:26
问好老师，欣赏精彩视频佳作，谢谢分享，点赞！

{:4_191:}

马黑黑 发表于 2023-6-14 20:48

小辣椒 发表于 2023-6-14 17:27
黑黑 这个飞机是不是用的路径啊

是的，一个非常简单的路径

马黑黑 发表于 2023-6-14 20:48

红影 发表于 2023-6-14 15:11
漂亮，这画面很清净，音乐也好听，这地方挺适合修炼的

嗯，支持你到这里修炼

马黑黑 发表于 2023-6-14 20:48

樵歌 发表于 2023-6-14 18:57
请发定位来，俺要去那露营钓鱼悠闲一个夏天

发到你微信了

马黑黑 发表于 2023-6-14 20:49

红影 发表于 2023-6-14 15:15
这个播放器按钮和小飞机都是用 clip-path: polygon()做出来的呢，这个是很纯粹的css+html+js呢。

是的，没有使用第三方组件

马黑黑 发表于 2023-6-14 20:49

醉美水芙蓉 发表于 2023-6-14 17:20
黑黑老师这个是在练飞行呀！

是的

马黑黑 发表于 2023-6-14 20:51

红影 发表于 2023-6-14 15:17
4个小飞机是用一组nth-of-type( ) 做出来的，开始还以为是倒影弄的。不过这个好，倒影在有些电脑上显示不了 ...

因为飞机剪裁的一模一样，做倒影也就可以用实体来做了。底下的两个纸飞机是在严重偏离了 offset-path 做运动

马黑黑 发表于 2023-6-14 20:51

红影 发表于 2023-6-14 15:21
用透明度来显示出暂停或播放图标，这个做法很聪明

这个之前也做过类似的

查看完整版本: 惠风和畅