论坛 › 动画音画 › 火

马黑黑 发表于 2023-5-18 07:34

火

本帖最后由 马黑黑 于 2023-5-18 07:35 编辑 <br /><br /><style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 593px;
        background:
                url('https://638183.freep.cn/638183/t23/2/3d10.jpg') no-repeat center/cover,
                #000 url('https://638183.freep.cn/638183/t23/2/fire.gif') no-repeat center/cover;
        background-blend-mode: screen;
        box-shadow: 0 0 8px #000;
        position: relative;
        display: grid;
        place-items: center;
        --state: paused;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <css-doodle id="mplayer">
                :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);
                );
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1987609776" autoplay loop></audio>
</div>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.body.appendChild(script);
        let mState = () => papa.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-18 07:36

代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 593px;
        background:
                url('https://638183.freep.cn/638183/t23/2/3d10.jpg') no-repeat center/cover,
                #000 url('https://638183.freep.cn/638183/t23/2/fire.gif') no-repeat center/cover;
        background-blend-mode: screen;
        box-shadow: 0 0 8px #000;
        position: relative;
        display: grid;
        place-items: center;
        --state: paused;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <css-doodle id="mplayer">
                :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);
                );
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1987609776" autoplay loop></audio>
</div>

<script>
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.body.appendChild(script);
        let mState = () => papa.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-18 07:53

这里主要演示——

一、元素的多重背景

#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 元素在旋转。

马黑黑 发表于 2023-5-18 07:56

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

樵歌 发表于 2023-5-18 08:17

火火火火，你只管传援火种，让那些弟子们燎原吧{:4_173:}

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

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

{:4_172:}

红影 发表于 2023-5-18 09:36

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

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

红影 发表于 2023-5-18 09:37

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

红影 发表于 2023-5-18 09:39

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

原来可以加入很多url，这个好{:4_204:}

梦缘 发表于 2023-5-18 10:23

感谢老师的代码分享，欣赏问好！{:4_185:}

罗浮梦 发表于 2023-5-18 11:23

漂亮！{:4_199:}音乐好听。

亦是金 发表于 2023-5-18 11:25

问好马黑黑老师！欣赏收藏了！{:4_190:}

朵拉 发表于 2023-5-18 11:34

这效果真好看，学习下~~{:4_178:}

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

马黑黑 发表于 2023-5-18 12:33

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

中下午好

南无月 发表于 2023-5-18 12:45

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

一、元素的多重背景


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

南无月 发表于 2023-5-18 12:46

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

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

马黑黑 发表于 2023-5-18 12:47

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

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

马黑黑 发表于 2023-5-18 12:49

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

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

南无月 发表于 2023-5-18 13:04

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

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

查看完整版本: 火