论坛 › 马黑黑教程专版 › Analogue Dreams

马黑黑 发表于 2024-10-7 08:10

Analogue Dreams

<style>
#mama {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/webp2/dreams.webp') no-repeat center/cover;
        border-radius: 6px;
        box-shadow: 3px 3px 8px gray;
        position: relative;
}
#bsvg {
        position: absolute;
        border-radius: 6px;
}
#player {
        --deg: 4turn;
        cursor: pointer;
        transform-origin: 512px 400px;
        animation: rot 10s linear infinite alternate var(--state);
}
#player:hover {
        --deg: 2turn;
}
.linepath {
        stroke-dasharray: 1664;
        animation: draw 10s linear infinite alternate var(--state);
}
@keyframes draw {
        from { stroke-dashoffset: 1664; }
        to { stroke-dashoffset: 0; }
}
@keyframes erase {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=41667693" autoplay loop></audio>
        <svg id="bsvg" width="100%" height="100%" fill="none" stroke="green" stroke-width="10" stroke-lineCap="round">
                <defs>
                        <g id="cpath" fill="rgba(0,100,100,.25)" stroke="yellow" stroke-width="2">
                                <title id="ctrMsg">播放/暂停</title>
                                <path d="M100 120,C-10 -30,210 -30,100 120"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(72 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(144 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(216 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(288 100 100)"/>
                        </g>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/>
                <path class="linepath" d="M0 0 H1024 V640" />
                <path class="linepath" d="M1024 640 H0 V0" />
                <ellipse cx="512" cy="550" rx="80" ry="30" stroke="none" fill="rgba(0,100,100,.35)"/>
                <rect x="506" y="400" width="12" height="150" stroke="none" fill="rgba(0,100,100,.25)"/>
                <use id="player" href="#cpath" x="412" y="300" width="200" height="200"/>
        </svg>
</div>

<script>
mState = () => {
        mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-10-7 08:10

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/webp2/dreams.webp') no-repeat center/cover;
        border-radius: 6px;
        box-shadow: 3px 3px 8px gray;
        position: relative;
}
#bsvg {
        position: absolute;
        border-radius: 6px;
}
#player {
        --deg: 4turn;
        cursor: pointer;
        transform-origin: 512px 400px;
        animation: rot 10s linear infinite alternate var(--state);
}
#player:hover {
        --deg: 2turn;
}
.linepath {
        stroke-dasharray: 1664;
        animation: draw 10s linear infinite alternate var(--state);
}
@keyframes draw {
        from { stroke-dashoffset: 1664; }
        to { stroke-dashoffset: 0; }
}
@keyframes erase {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
&lt;/style&gt;

&lt;div id="mama"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=41667693" autoplay loop&gt;&lt;/audio&gt;
        &lt;svg id="bsvg" width="100%" height="100%" fill="none" stroke="green" stroke-width="10" stroke-lineCap="round"&gt;
                &lt;defs&gt;
                        &lt;g id="cpath" fill="rgba(0,100,100,.25)" stroke="yellow" stroke-width="2"&gt;
                                &lt;title id="ctrMsg"&gt;播放/暂停&lt;/title&gt;
                                &lt;path d="M100 120,C-10 -30,210 -30,100 120"/&gt;
                                &lt;path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(72 100 100)"/&gt;
                                &lt;path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(144 100 100)"/&gt;
                                &lt;path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(216 100 100)"/&gt;
                                &lt;path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(288 100 100)"/&gt;
                        &lt;/g&gt;
                &lt;/defs&gt;
                &lt;rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/&gt;
                &lt;path class="linepath" d="M0 0 H1024 V640" /&gt;
                &lt;path class="linepath" d="M1024 640 H0 V0" /&gt;
                &lt;ellipse cx="512" cy="550" rx="80" ry="30" stroke="none" fill="rgba(0,100,100,.35)"/&gt;
                &lt;rect x="506" y="400" width="12" height="150" stroke="none" fill="rgba(0,100,100,.25)"/&gt;
                &lt;use id="player" href="#cpath" x="412" y="300" width="200" height="200"/&gt;
        &lt;/svg&gt;
&lt;/div&gt;

&lt;script&gt;
mState = () =&gt; {
        mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () =&gt; mState();
player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-10-7 08:15

本帖：

（一）流动边框、风扇小播使用嵌入的svg实现。svg与帖子容器同宽高，用路径绘制边框、类风扇的扇叶，用矩形、椭圆等元素绘制风扇其他部件；

（二）svg所有动画通过 CSS 实现。

马黑黑 发表于 2024-10-7 08:17

<p>给 #mama 补加 z-index 属性：z-index: 1;</p>
<script>
mama.style.setProperty('z-index', '1');
</script>

朵拉 发表于 2024-10-7 08:31

流动的边框，是小风车在转动么，好看~~{:4_204:}

花飞飞 发表于 2024-10-7 08:59

这么鲜亮的贴子，音乐史诗级的震撼。。。无论是视觉听觉都是唯美。

花飞飞 发表于 2024-10-7 09:06

马黑黑 发表于 2024-10-7 08:15
本帖：

（一）流动边框、风扇小播使用嵌入的svg实现。svg与帖子容器同宽高，用路径绘制边框、类风扇的扇 ...

这个解说好清楚~~代码一层一层排得很是清晰，看着极度舒适。。。。               

红影 发表于 2024-10-7 09:21

这个厉害了，小播的转动方向和边框的流动方向一致呢{:4_199:}

红影 发表于 2024-10-7 09:22

这个转动也是算好的吧。鼠标触动还能改变转速。

红影 发表于 2024-10-7 09:26

马黑黑 发表于 2024-10-7 08:15
本帖：

（一）流动边框、风扇小播使用嵌入的svg实现。svg与帖子容器同宽高，用路径绘制边框、类风扇的扇 ...

“用矩形、椭圆等元素绘制风扇其他部件”

就是风扇的阴影和竖杆吧，这个有趣，全部能用svg实现，而且既是组合在一起的，又用id一一对应，各行其是，互不干扰。

梦江南 发表于 2024-10-7 09:30

黑黑老师，风车下面的一条杆子和圆盘也是代码绘出来的吗？

红影 发表于 2024-10-7 09:33

两个地方没看懂

@keyframes draw 名字有对应，@keyframes erase 没看出来对应哪句的

ctrMsg.textContent =这个还要再控制么，它不是包在player也就是cpath里的么？咋觉得应该控制bsvg呢？

红影 发表于 2024-10-7 09:37

又是先忙着看代码了，嗯，赶紧欣赏帖子，非常童趣，画面靓丽，水果多多{:4_173:}{:4_199:}

红影 发表于 2024-10-7 09:39

还是没明白为什么小播角度转4圈就正好对应上外框流动呢？{:4_203:}
应该里面还有其他的设置我没留意到

红影 发表于 2024-10-7 09:41

动态里多加个动作就要多考虑很多，虽然名称对应让一切井井有条，如何控制动作也是大学问。
这个帖子里学习内容多多{:4_199:}

马黑黑 发表于 2024-10-7 11:25

花飞飞 发表于 2024-10-7 08:59
这么鲜亮的贴子，音乐史诗级的震撼。。。无论是视觉听觉都是唯美。

{:4_187:}

马黑黑 发表于 2024-10-7 11:25

梦江南 发表于 2024-10-7 09:30
黑黑老师，风车下面的一条杆子和圆盘也是代码绘出来的吗？

是的，三楼有说明

马黑黑 发表于 2024-10-7 11:25

朵拉 发表于 2024-10-7 08:31
流动的边框，是小风车在转动么，好看~~

{:4_190:}

马黑黑 发表于 2024-10-7 11:26

花飞飞 发表于 2024-10-7 09:06
这个解说好清楚~~代码一层一层排得很是清晰，看着极度舒适。。。。

{:4_190:}

马黑黑 发表于 2024-10-7 11:26

红影 发表于 2024-10-7 09:21
这个厉害了，小播的转动方向和边框的流动方向一致呢

这个只需简单设置 dur 周期时长 和转动方向

查看完整版本: Analogue Dreams