马黑黑 发表于 2023-5-30 08:19

雾里看花

<css-doodle grid="3x1" id="mplayer">
        :doodle {
                @size: 1024px 640px;
                background: tan url('https://638183.freep.cn/638183/t23/webp1/uhhx.webp') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                filter: blur(1px) opacity(.95);
                z-index: 1;
                margin: 0 0 0 calc(50% - 593px);
                --state: paused;
        }
        clip-path: @shape(
                points: 300;
                r: cos(@pn(5,4,2)t);
        );
        background: radial-gradient(purple, orange, lightgreen);
        @nth(1,3) {
                @size: 100px;
                @place: 60px 60px;
                cursor: pointer; animation: rot 6s infinite linear var(--state);
        }
        @nth(2) { @size: 50px; @place: 75% 34%; }
        @nth(3) { @size: 160px; @place: 30% 26%; }
        @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1421948999" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-5-30 08:31

帖子代码
<css-doodle grid="3x1" id="mplayer">
        :doodle {
                @size: 1024px 640px;
                background: tan url('https://638183.freep.cn/638183/t23/webp1/uhhx.webp') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                filter: blur(1px) opacity(.95);
                z-index: 1;
                margin: 0 0 0 calc(50% - 593px);
                --state: paused;
        }
        clip-path: @shape(
                points: 300;
                r: cos(@pn(5,4,2)t);
        );
        background: radial-gradient(purple, orange, lightgreen);
        @nth(1,3) {
                @size: 100px;
                @place: 60px 60px;
                cursor: pointer; animation: rot 6s infinite linear var(--state);
        }
        @nth(2) { @size: 50px; @place: 75% 34%; }
        @nth(3) { @size: 160px; @place: 30% 26%; }
        @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1421948999" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小文 发表于 2023-5-30 08:43

好美，我喜欢！欣赏！

红影 发表于 2023-5-30 10:05

3朵美丽的花儿，这个制作方便而漂亮。很赞{:4_187:}

亦是金 发表于 2023-5-30 10:14

问好老师！{:4_190:}欣赏美帖，收藏学习备用！

醉美水芙蓉 发表于 2023-5-30 11:20

醉美水芙蓉 发表于 2023-5-30 11:45

马黑黑 发表于 2023-5-30 11:59

醉美水芙蓉 发表于 2023-5-30 11:45
美女头上的花怎么不转呀？

转了的话不把头发给绞了？{:4_170:}

马黑黑 发表于 2023-5-30 12:00

小文 发表于 2023-5-30 08:43
好美，我喜欢！欣赏！

感谢支持

马黑黑 发表于 2023-5-30 12:00

醉美水芙蓉 发表于 2023-5-30 11:20
很漂亮，喜欢老师的播放器！

这个很简单的

马黑黑 发表于 2023-5-30 12:01

红影 发表于 2023-5-30 10:05
3朵美丽的花儿，这个制作方便而漂亮。很赞

简简单单也是不错的

马黑黑 发表于 2023-5-30 12:01

亦是金 发表于 2023-5-30 10:14
问好老师！欣赏美帖，收藏学习备用！

这个不复杂，应该可以掌握吧

焱鑫磊 发表于 2023-5-30 17:42

欣赏！棒棒哒！{:4_204:}

冬天的雨 发表于 2023-5-30 17:47

欣赏马老师新产品{:4_199:}

冬天的雨 发表于 2023-5-30 17:49

试了三朵花，小花也是控制按钮{:4_178:}

冬天的雨 发表于 2023-5-30 17:49

马老师辛苦{:4_187:}

南无月 发表于 2023-5-30 17:59

这个线性渐变色十分好看，背景有点点透明{:4_190:}

马黑黑 发表于 2023-5-30 18:04

南无月 发表于 2023-5-30 17:59
这个线性渐变色十分好看，背景有点点透明

对，不透明度是 0.95，透明度是 0.05

马黑黑 发表于 2023-5-30 18:13

焱鑫磊 发表于 2023-5-30 17:42
欣赏！棒棒哒！

下午好，请{:4_190:}

马黑黑 发表于 2023-5-30 18:14

冬天的雨 发表于 2023-5-30 17:47
欣赏马老师新产品

这个不算什么新了，都玩了快一个月了
页: [1] 2 3 4
查看完整版本: 雾里看花