火

马黑黑

:doodle { @size: 160px; animation: rot 6s infinite linear var(--state); cursor: pointer; } background: rgba(255,100,0,.7); clip-path: @shape( points: 300; scale: .25; x: 2 * cos(t) + cos(8t); y: 2 * sin(t) - sin(8t); );

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 593px;
   
6.         background:
   
7.                 url('https://638183.freep.cn/638183/t23/2/3d10.jpg') no-repeat center/cover,
   
8.                 #000 url('https://638183.freep.cn/638183/t23/2/fire.gif') no-repeat center/cover;
   
9.         background-blend-mode: screen;
   
10.         box-shadow: 0 0 8px #000;
    
11.         position: relative;
    
12.         display: grid;
    
13.         place-items: center;
    
14.         --state: paused;
    
15. }
    
16. @keyframes rot { to { transform: rotate(1turn); } }
    
17. </style>
    
18. 
    
19. <div id="papa">
    
20.         <css-doodle id="mplayer">
    
21.                 :doodle { @size: 160px; animation: rot 6s infinite linear var(--state); cursor: pointer; }
    
22.                 background: rgba(255,100,0,.7);
    
23.                 clip-path: @shape(
    
24.                         points: 300;
    
25.                         scale: .25;
    
26.                         x: 2 * cos(t) + cos(8t);
    
27.                         y: 2 * sin(t) - sin(8t);
    
28.                 );
    
29.         </css-doodle>
    
30.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1987609776" autoplay loop></audio>
    
31. </div>
    
32. 
    
33. <script>
    
34.         let script = document.createElement('script');
    
35.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
36.         document.body.appendChild(script);
    
37.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
38.         aud.addEventListener('play', mState, false);
    
39.         aud.addEventListener('pause', mState, false);
    
40.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
41. </script>

复制代码

马黑黑

这里主要演示——

一、元素的多重背景

#papa {} 选择器的 background 背景属性，以简写的方式使用了两个 url 参数，它们的相关属性设置一样，都是 no-repeat center/cover ，这样，两个背景图片是前者覆盖后者的，即第二背景张图片看不到！故此，后续设置了 background-blend-mode 属性，该属性与 mix-blend-mode 原理相同，都是图形融合技术层面的东东，分别称为背景/混合融合技术，本帖使用 screen 值，滤色功能，达到的效果是第二张图片的背景色（黑色图层）融合到了第一张图片的背景，或换言之，第二张图片的黑色背景被过滤掉了。

background-blend-mode 有图层隔离之说，这里的值只设置一个，它对应第二个url而不是第一个，第一个天然拥有优先权，后面图层的各种滤镜均不影响到它。

另外需要注意的是，当背景使用很多的url，在简写模式下，只有最后一个url的前面可加入 background-color 值，其作用是图片失效时元素还能拥有一个背景颜色。

二、css-doodle调用 style 标签里设置的关键帧动画

css-doodle可以调用在 <style> ... </style> 里设置的 @keyframes 动画，不一定都得设置在<css-doodle> ... </css-doodle> 标签里。本帖，animation属性用在了 :doodle {} 选择器内，意为是整个 css-doodle 元素在旋转。

马黑黑

至于火星，那是图片效果，不是 css-doodle 做出来的，大家不要失望

樵歌

火火火火，你只管传援火种，让那些弟子们燎原吧

马黑黑

樵歌 发表于 2023-5-18 08:17
火火火火，你只管传援火种，让那些弟子们燎原吧

红影

马黑黑 发表于 2023-5-18 07:36
代码

还是头一次看到background-blend-mode，我一开始竟直接混同于  mix-blend-mode 了，惭愧
它的取值效果也和 mix-blend-mode 是一样的么？

红影

那个火我以为也和雨丝一样，是你做出来的呢，原来直接用的图图

红影

“另外需要注意的是，当背景使用很多的url，在简写模式下，只有最后一个url的前面可加入 background-color 值，其作用是图片失效时元素还能拥有一个背景颜色。”

原来可以加入很多url，这个好

梦缘

感谢老师的代码分享，欣赏问好！

罗浮梦

漂亮！音乐好听。

亦是金

问好马黑黑老师！欣赏收藏了！

朵拉

这效果真好看，学习下~~

马黑黑

醉美水芙蓉 发表于 2023-5-18 11:45
特效漂亮！欣赏老师佳作！

中下午好

南无月

马黑黑 发表于 2023-5-18 07:53
这里主要演示——

一、元素的多重背景

这是两个新的知识点。背景可以叠起来。除了滤色，是不是也可以调透明度

南无月

马黑黑 发表于 2023-5-18 07:56
至于火星，那是图片效果，不是 css-doodle 做出来的，大家不要失望

明白了，这么大的火星动态图不好找

马黑黑

南无月 发表于 2023-5-18 12:45
这是两个新的知识点。背景可以叠起来。除了滤色，是不是也可以调透明度

背景混合的调不了，除非你用渐变背景，可以使用 rgba 或 hsla，其中的 a 就是alpha通道

马黑黑

南无月 发表于 2023-5-18 12:46
明白了，这么大的火星动态图不好找

我的图片没那么大的，只是在背景中将其变大而已，center/cover 参数中的 cover 就是像盖被子一样吧床盖满，照顾到的是宽高中最短的尺寸，它与“床沿”保持一致

南无月

马黑黑 发表于 2023-5-18 12:47
背景混合的调不了，除非你用渐变背景，可以使用 rgba 或 hsla，其中的 a 就是alpha通道

好的，试着做一下才知道还有什么问题。到时候再反馈