【落。字】十里桃香 (同图花简静)

落字秋风

云端漫步 发表于 2025-8-14 19:58
同图制作完美之作，演绎的相当精彩！

谢谢

落字秋风

柒玥 发表于 2025-8-14 21:17
欣赏落落带来的精彩同图，创意很棒，标题好看，音乐好听~

新周好，玥玥

落字秋风

柒玥 发表于 2025-8-14 21:18
问好落落，谢谢你带来的精彩分享，祝创作愉快，周四快乐~

一起刷图开心

落字秋风

清梦 发表于 2025-8-16 12:11
视觉好就可，我看着好看~

整个图有点杂，元素有点乱，不清新
下次时间充裕一点再做

花简静

落字秋风 发表于 2025-8-18 09:37
等下一回再做个，先记好，代码有点复杂

哈哈，好哒。。随时交流

花简静

落字秋风 发表于 2025-8-18 09:38
没有做过四图，第一次，整图有点乱，下次再做个清新一点的

嗯哪，太好了，准备新作，期待ING.。

落字秋风

花简静 发表于 2025-8-18 10:26
嗯哪，太好了，准备新作，期待ING.。

花花在线啊，哈哈哈哈
早上好，美妞

花简静

花简静

你的代码中：关于视频的是这一句代码：    .qk-vid { mix-blend-mode:screen; opacity: .75;-webkit-mask: linear-gradient(to bottom,transparent,transparent,red);}
后面红的部分是只保留下半部，隐藏上半部。。。

如果你要改为全屏显示，要去这里找：http://kkshan.com/forum.php?mod= ... &extra=page%3D1
点开：（三）挖空中间LOGO边缘无虚化（适用于千库视频，两句放在一起）的链接
把红色对应部分复制过来就可以。换成以下两句。。
webkit-mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red);  

这个效果比较常用，因为千库视频LOGO在中间，所以就把中间挖掉，显示四周，刚好人物也基本能完整显示，不被遮盖。。

花简静

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 0px; width: clamp(600px, 90vw, 1856px); height: auto; aspect-ratio: 18/9;margin: 150px 0;left: calc(50% - 81px);--bg: url('https://lengwx240511.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E5%9B%BE/2.jpg') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 3%; --per: -2%; --a: 45deg; }
    #pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
    #ma {left: 31%; top: 40%; background: url('https://642303.freep.cn/642303/za/fl1033.png') no-repeat center/cover;}
    #btnFs { right: 20px; bottom: 20px; }
    .qk-vid { mix-blend-mode:screen; opacity: .95;  
    webkit-mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red); }
</style>

<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=165839" autoplay loop></audio>
    <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/20/video63661b5c8b098.mp4" autoplay loop muted></video>
    <div id="ma" class="hue-rotate"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);

    var per = -2, step = 0.5, aniCounter = 0, raf;
    var pics = [
        'https://lengwx240511.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E5%9B%BE/2.jpg',
        'https://lengwx240511.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E5%9B%BE/1.jpg',
        'https://lengwx240511.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E5%9B%BE/3.jpg',
        'https://lengwx240511.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E5%9B%BE/5.jpg',
    ];
    ma.onanimationiteration = () => {
        var angle = aniCounter % 24, picIdx = aniCounter % pics.length;
        pa.style.setProperty('--a', `${180 + (angle * 90)}deg`);
        pa.style.setProperty('--bg1', `url(${pics[picIdx]}) no-repeat center/cover`);
        picIdx = (picIdx + 1) % pics.length;
        aniCounter ++;
        changePic();
    };

    function changePic() {
        if (per > 100) {
            cancelAnimationFrame(raf);
            per = -2;
            var picIdx = aniCounter % pics.length;
            picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
            pa.style.setProperty('--bg', `url(${pics[picIdx]}) no-repeat center/cover`);
        } else {
            per += step;
            pa.style.setProperty('--per', per + '%');
            raf = requestAnimationFrame(changePic);
        }
    }
</script>