雾里看花

马黑黑

: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); } }

马黑黑

帖子代码

1. <css-doodle grid="3x1" id="mplayer">
   
2.         :doodle {
   
3.                 @size: 1024px 640px;
   
4.                 background: tan url('https://638183.freep.cn/638183/t23/webp1/uhhx.webp') no-repeat center / cover;
   
5.                 box-shadow: 0 0 6px #000;
   
6.                 position: relative;
   
7.                 filter: blur(1px) opacity(.95);
   
8.                 z-index: 1;
   
9.                 margin: 0 0 0 calc(50% - 593px);
   
10.                 --state: paused;
    
11.         }
    
12.         clip-path: @shape(
    
13.                 points: 300;
    
14.                 r: cos(@pn(5,4,2)t);
    
15.         );
    
16.         background: radial-gradient(purple, orange, lightgreen);
    
17.         @nth(1,3) {
    
18.                 @size: 100px;
    
19.                 @place: 60px 60px;
    
20.                 cursor: pointer; animation: rot 6s infinite linear var(--state);
    
21.         }
    
22.         @nth(2) { @size: 50px; @place: 75% 34%; }
    
23.         @nth(3) { @size: 160px; @place: 30% 26%; }
    
24.         @keyframes rot { to { transform: rotate(1turn); } }
    
25. </css-doodle>
    
26. 
    
27. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1421948999" autoplay="autoplay" loop="loop"></audio>
    
28. 
    
29. <script>
    
30. (function() {
    
31.         let script = document.createElement('script');
    
32.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
33.         document.head.appendChild(script);
    
34.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35.         aud.addEventListener('play', mState, false);
    
36.         aud.addEventListener('pause', mState, false);
    
37.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
38. })();
    
39. </script>

复制代码

小文

好美，我喜欢！欣赏！

红影

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

亦是金

问好老师！欣赏美帖，收藏学习备用！

马黑黑

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

转了的话不把头发给绞了？

马黑黑

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

感谢支持

马黑黑

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

这个很简单的

马黑黑

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

简简单单也是不错的

马黑黑

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

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

焱鑫磊

欣赏！棒棒哒！

冬天的雨

欣赏马老师新产品

冬天的雨

试了三朵花，小花也是控制按钮

冬天的雨

马老师辛苦

南无月

这个线性渐变色十分好看，背景有点点透明

马黑黑

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

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

马黑黑

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

下午好，请

马黑黑

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

这个不算什么新了，都玩了快一个月了