论坛 › 动画音画 › 【黑师代码】追光的人（学习黑师2050723《冰封之舞》八角裁切效果）

花飞飞 发表于 2025-8-4 13:41

【黑师代码】追光的人（学习黑师2050723《冰封之舞》八角裁切效果）

<style>
        #pa { margin: 150px 0; left: calc(50% - 101px); transform: translateX(-50%); width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9; background: url('https://642303.freep.cn/642303/tu/20250804yan12.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 800px; display: grid; place-items: center; position: relative; }
        #btnFs { bottom: 20px; color: #eee; }
        #ma { position: absolute; aspect-ratio: 1/1; width: 16%;left:52%;top:50%; cursor: pointer; transform-style: preserve-3d; animation: rot 18s linear infinite var(--state); }
        .son { position: absolute; left: 50%; width: 50%; height: 60%; background: url('https://642303.freep.cn/642303/za/162039fqin5coz5kaa7ik7%20(1).gif') no-repeat center/ 50% 100%; border: 1px solid #f0d568; border-radius:
100% 0% 75% 25% / 100% 6% 94% 0%; transform-origin: 0% 100%; transform: rotateY(var(--a)); box-shadow: inset 0 0 20px #acece5, 1px 1px 8px snow; transition: .75s; }
        .son::before { position: absolute; content: ''; left: -100%; top: 100%; width: 100%; height: 100%; background: inherit; border: inherit; border-radius: inherit; box-shadow: inherit;filter:opacity(0.15); transform: scale(-1, -1); }
        .vid1 {
    position: absolute;
    width: 50%;
    height: 50%;
    right:15%;
    top:30%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode:overlay;
    -webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);
    z-index: 2;
    opacity: .70;
}
.vid2 {
    position: absolute;
    width: 100%;
    height: 120%;
    top:-100px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    webkit-mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red);   
    z-index: 2;
    opacity: .95;
}
        @keyframes rot { to { transform: rotateY(360deg); } }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2721954616" autoplay loop></audio>
        <video class="vid1" src="https://bpic.588ku.com/video_listen/588ku_preview/21/07/13/17/16/54/video60ed5a069acc8.mp4" autoplay loop muted></video>
        <video class="vid2" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay loop muted></video>
        <div id="ma"></div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        FS(pa, ma);
        const tt = 10;
        for (var i = 0; i < tt; i ++) {
                const d = document.createElement('div');
                const c1 = Math.random().toString(16).substring(2, 8), c2 = Math.random().toString(16).substring(2, 8);
                d.className = 'son';
                d.style.cssText += `--a: ${i * 360 / tt}deg;`;
                ma.appendChild(d);
        }
</script>

花飞飞 发表于 2025-8-4 13:42

@马黑黑 找了个浪漫 点的效果，做了一个贺贴，算是作业吧。。这形状很不好整。。借助了个软件{:4_170:}

马黑黑 发表于 2025-8-4 13:50

花飞飞 发表于 2025-8-4 13:42
@马黑黑 找了个浪漫 点的效果，做了一个贺贴，算是作业吧。。这形状很不好整。。借助了个软件

工具软件能上手可以事半功倍

花飞飞 发表于 2025-8-4 13:55

马黑黑 发表于 2025-8-4 13:50
工具软件能上手可以事半功倍

这个组合起来跟朵花似的。。
花瓣里面是头像，居然支持GIF动画。。。这个可是意外之喜，还以为动画效果没有了。。

梦江南 发表于 2025-8-4 14:02

好久不见，又见老师的精美制作。问好！{:4_187:}

马黑黑 发表于 2025-8-4 14:05

花飞飞 发表于 2025-8-4 13:55
这个组合起来跟朵花似的。。
花瓣里面是头像，居然支持GIF动画。。。这个可是意外之喜，还以为动画效果 ...

背景图片支持一切图片格式

杨帆 发表于 2025-8-4 18:00

漂亮！谢谢花飞飞精彩分享{:4_204:}

花飞飞 发表于 2025-8-4 19:50

马黑黑 发表于 2025-8-4 14:05
背景图片支持一切图片格式

动图多数有黑背景，如果能滤掉的话，就有许多种好看的效果了。
我这个背景是长方形的，原签名。。。
当做背景有一部分是空隙。
尺寸啥的还需要琢磨一下。

花飞飞 发表于 2025-8-4 19:50

杨帆 发表于 2025-8-4 18:00
漂亮！谢谢花飞飞精彩分享

感谢杨帆支持{:4_190:}

马黑黑 发表于 2025-8-4 20:11

花飞飞 发表于 2025-8-4 19:50
动图多数有黑背景，如果能滤掉的话，就有许多种好看的效果了。
我这个背景是长方形的，原签名。。。
当 ...

背景有 background-blend-mode、元素有 mix-blend-mode 可用，它们用于融合背景或图像，可以处理纯黑背景

花飞飞 发表于 2025-8-4 20:20

马黑黑 发表于 2025-8-4 20:11
背景有 background-blend-mode、元素有 mix-blend-mode 可用，它们用于融合背景或图像，可以处理纯黑背景

黑背景可以去掉呀，这个可有意思了。。背景填满是不行了的么

红影 发表于 2025-8-4 20:54

这个制作漂亮，看着小播觉得特别靓丽，原来小播后面还有视频增强效果呢。
这构思真巧妙。欣赏飞飞好帖{:4_199:}

马黑黑 发表于 2025-8-4 21:12

花飞飞 发表于 2025-8-4 20:20
黑背景可以去掉呀，这个可有意思了。。背景填满是不行了的么

*-blend-mode技术在我站里还介绍

花飞飞 发表于 2025-8-5 15:45

红影 发表于 2025-8-4 20:54
这个制作漂亮，看着小播觉得特别靓丽，原来小播后面还有视频增强效果呢。
这构思真巧妙。欣赏飞飞好帖{:4_ ...

感谢影子支持~~{:4_187:}有你肯定真是开心

花飞飞 发表于 2025-8-5 15:53

马黑黑 发表于 2025-8-4 21:12
*-blend-mode技术在我站里还介绍

{:4_173:}有的多种混合，很详细的教程，每种都有具体演示，我再仔细啃啃

马黑黑 发表于 2025-8-5 18:33

花飞飞 发表于 2025-8-5 15:53
有的多种混合，很详细的教程，每种都有具体演示，我再仔细啃啃

这个东东太多单词也长不好记，用时查查就好

花飞飞 发表于 2025-8-5 20:24

马黑黑 发表于 2025-8-5 18:33
这个东东太多单词也长不好记，用时查查就好

这个用得多。。。单词只记得少数几个。。。还是常查状态{:4_173:}

马黑黑 发表于 2025-8-5 20:45

花飞飞 发表于 2025-8-5 20:24
这个用得多。。。单词只记得少数几个。。。还是常查状态

查查也好，没有负担

红影 发表于 2025-8-5 21:43

花飞飞 发表于 2025-8-5 15:45
感谢影子支持~~有你肯定真是开心

哪里，不客气啊，飞飞的制作还是很精彩的{:4_187:}

花飞飞 发表于 2025-8-6 09:10

马黑黑 发表于 2025-8-5 20:45
查查也好，没有负担

嗯哪，负担肯定木有滴。。。小白又负不动，哈哈。。{:4_170:}

查看完整版本: 【黑师代码】追光的人（学习黑师2050723《冰封之舞》八角裁切效果）