马黑黑 发表于 2023-6-25 23:26

东篱闲人·卖花声

<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
        min-height: 400px;
        border-radius: 16px;
        border: 4px solid green;
        font: bold 24px/40px sans-serif;
        text-shadow: 1px 1px 2px #000;
        color: #ccc;
        background: #000 url('https://638183.freep.cn/638183/t23/2/flower.jpg') no-repeat 95% 50%;
        padding: 20px;
        position: relative;
        --state: paused; --clip: '';
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
}
#mydiv::before {
        width: 50px;
        height: 50px;
        left: calc(50% - 30px);
        bottom: 20px;
        background: radial-gradient(snow,green);
        clip-path: var(--clip);
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
        content: '卖花声';
        left: 50%;
        top: -22px;
        transform: translate(-50%);
        background: linear-gradient(green,snow);
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        padding: 0 40px;
}
#mydiv > p { margin: 10px 0; font-size: 20px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <p style="text-align:center;">文/东篱闲人</p>
        <p><br></p>
        <p>簾外柳梢青。闲弄琴筝。<br>一壶浊酒对孤灯。落拓流离疲倦客，身似浮萍。</p>
        <p>独自苦伶仃。谁寄深情。<br>落花流水一层层。明月今宵偏又照，零落茅棚。</p>
        <p style="text-align: right; font-size: 16px;"><br><br><br>2023年6月25日</p>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1859885958" autoplay="autoplay" loop="loop"></audio>

<script>
(function () {
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

        let rosePath = (ww, num) => {
        let points = 300;
                let x0 = y0 = r = ww / 2, pathAr = [];
                for (let i = 0; i <= points; i ++) {
                        let angle = i * 2 * Math.PI / points;
                        let x = x0 - r * Math.cos(angle) * Math.sin(num * angle);
                        let y = y0 - r * Math.sin(angle) * Math.sin(num * angle);
                        pathAr.push(x + 'px ' + y + 'px');
                }
                return `polygon(${pathAr.join(', ')})`;
        };

        mydiv.style.setProperty('--clip', rosePath(50,2));
})();
</script>

红影 发表于 2023-6-25 23:29

先把沙发留给东篱大哥@东篱闲人{:4_187:}

红影 发表于 2023-6-25 23:33

这样深色的背景里，更能看得出标题栏里的颜色渐变呢。配的花朵和播放器的颜色也十分搭配，这个制作特别符合东篱大哥词的意境呢，给黑黑点赞{:4_199:}

马黑黑 发表于 2023-6-25 23:37

红影 发表于 2023-6-25 23:33
这样深色的背景里，更能看得出标题栏里的颜色渐变呢。配的花朵和播放器的颜色也十分搭配，这个制作特别符合 ...

{:4_190:}

马黑黑 发表于 2023-6-25 23:51

红影 发表于 2023-6-25 23:29
先把沙发留给东篱大哥@东篱闲人

东篱还在美滋滋地数钱钱{:4_170:}

樵歌 发表于 2023-6-26 07:38

底色和图图的搭配与音乐的设计都非常配合原作者的意境。

马黑黑 发表于 2023-6-26 08:18

樵歌 发表于 2023-6-26 07:38
底色和图图的搭配与音乐的设计都非常配合原作者的意境。

感谢认可与鼓励

东篱闲人 发表于 2023-6-26 08:51

黑黑真会玩！{:5_116:}

东篱闲人 发表于 2023-6-26 08:51

红影 发表于 2023-6-25 23:29
先把沙发留给东篱大哥@东篱闲人

谢谢，喝水。。。。{:4_190:}

东篱闲人 发表于 2023-6-26 08:52

马黑黑 发表于 2023-6-25 23:51
东篱还在美滋滋地数钱钱

你很危险，知道的忒多。。。{:4_189:}

马黑黑 发表于 2023-6-26 11:32

东篱闲人 发表于 2023-6-26 08:52
你很危险，知道的忒多。。。

天上事，天下事，神事，人事，…………无所不知无所不晓

马黑黑 发表于 2023-6-26 11:32

东篱闲人 发表于 2023-6-26 08:51
黑黑真会玩！

知道的多，玩的少

醉美水芙蓉 发表于 2023-6-26 11:51

醉美水芙蓉 发表于 2023-6-26 11:51

东篱闲人 发表于 2023-6-26 11:57

马黑黑 发表于 2023-6-26 11:32
天上事，天下事，神事，人事，…………无所不知无所不晓

比刘伯温还厉害。。{:5_116:}

马黑黑 发表于 2023-6-26 13:19

东篱闲人 发表于 2023-6-26 11:57
比刘伯温还厉害。。

那不可比。刘伯温那会人家没有大数据。

马黑黑 发表于 2023-6-26 13:21

醉美水芙蓉 发表于 2023-6-26 11:51
欣赏学习黑黑老师精彩制作！

感谢支持{:4_190:}

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

问好老师，欣赏精彩分享，点赞！{:4_185:}

南无月 发表于 2023-6-26 20:49

这配色大胆儿，意外的谐调。。漂亮{:4_187:}

马黑黑 发表于 2023-6-26 20:50

南无月 发表于 2023-6-26 20:49
这配色大胆儿，意外的谐调。。漂亮

黑黑的颜色好配
页: [1] 2
查看完整版本: 东篱闲人·卖花声