论坛 › 动画音画 › 【雨声音画】时光清浅，岁月静好

雨声 发表于 2023-12-1 12:41

【雨声音画】时光清浅，岁月静好

本帖最后由 雨声 于 2023-12-2 14:21 编辑 <br /><br /><style>
#papa {
        margin: 0 0 0 calc(50% - 961px);
        display: grid;
        place-items: center;
        width: 1700px;
        height:900px;
top:130px;
        background: lightblue url('https://z1.ax1x.com/2023/12/01/pirObqI.jpg') no-repeat center bottom;
        box-shadow: 3px 3px 20px #000;
        position: relative;
                overflow: hidden;
        z-index: 1;
        --state: running;
}
#papa::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 44%;
        bottom: 1px;
        background: inherit;
        filter: url(#turb);
}
#papa > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
.play_pic {
        position: absolute;
        width: 50px;
        height: 50px;
        right: 60px;
        opacity: .135;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
        z-index: 200;
}
.play_pic:nth-of-type(1) {
        width: 100px;
        height: 100px;
        filter: sepia(70%);
}

.play_pic:nth-of-type(2) {
        width: 30px;
        height:30px;
        filter: hue-rotate(270deg) contrast(125%);
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
#vid {
        position: absolute;
        width: 120%;
        height: 120%;
        top:-100px;
        left:-301px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index:3;
        opacity: .46;
}
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay="" loop="" muted=""></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1370908141" autoplay loop></audio>
        <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
        <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
        <img id="iplay" class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
</div><svg class="myfilter">    <filter id="turb" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%">      <feturbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2"></feturbulence>      <fedisplacementmap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></fedisplacementmap>    </filter></svg>
<script>(function() {
        let frames = 0, rad = Math.PI / 180;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let js1 = 'https://638183.freep.cn/638183/web/api/hc_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
        let body = document.querySelector('body'), jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
};

        loadJs(js1, () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'bottom: 60px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,150,.65)); color: #fff;',
        });
});
let fewave = () => {
                let bfx = 0.01, bfy = 0.1;
                frames += 0.5;
                bfx += 0.002 * Math.cos(frames * rad);
                bfy += 0.02 * Math.sin(frames * rad);
                bf = ;
                feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
                requestAnimationFrame(fewave);
        };

        fewave();

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br><br><br>

雨声 发表于 2023-12-1 12:43

周末了，祝朋友们好心情！{:4_204:}

东篱闲人 发表于 2023-12-1 12:57

思路独特，设计新颖，质地细腻。唯美一幅，让人陶醉。。。{:5_116:}

醉美水芙蓉 发表于 2023-12-1 14:23

樵歌 发表于 2023-12-1 14:41

看了图听了音，使人心境平和安宁，能达到这个至高的境界，除了高手舍其谁！

红影 发表于 2023-12-1 18:52

雨声姐好美的制作，那么清亮的水波，那么温柔的情怀。欣赏雨声姐好帖{:4_199:}

红影 发表于 2023-12-1 19:00

水波做得好美。play_pic的花朵好像没出来？雨声姐再看看？{:4_173:}

红影 发表于 2023-12-1 19:01

哦，找到了，在船儿的旁边，看着好淡啊{:4_173:}

红影 发表于 2023-12-1 19:02

雨声 发表于 2023-12-1 12:43
周末了，祝朋友们好心情！

谢谢雨声姐，也祝你周末快乐{:4_179:}

雨声 发表于 2023-12-1 19:17

东篱闲人 发表于 2023-12-1 12:57
思路独特，设计新颖，质地细腻。唯美一幅，让人陶醉。。。

谢谢东篱老师支持鼓励{:4_180:}

雨声 发表于 2023-12-1 19:18

醉美水芙蓉 发表于 2023-12-1 14:23
欣赏美女精彩音画！

问好芙蓉老师，谢谢支持，周末快乐！{:4_179:}

雨声 发表于 2023-12-1 19:19

樵歌 发表于 2023-12-1 14:41
看了图听了音，使人心境平和安宁，能达到这个至高的境界，除了高手舍其谁！

问好樵歌老师，感谢临帖支持，周末快乐！{:4_180:}

雨声 发表于 2023-12-1 19:20

红影 发表于 2023-12-1 18:52
雨声姐好美的制作，那么清亮的水波，那么温柔的情怀。欣赏雨声姐好帖

谢谢妹妹的支持鼓励，周末快乐！{:4_179:}

雨声 发表于 2023-12-1 19:22

红影 发表于 2023-12-1 19:00
水波做得好美。play_pic的花朵好像没出来？雨声姐再看看？

水波是加的特效mp4，不是我做的，我要会做这个还不得瑟s我{:4_200:}

雨声 发表于 2023-12-1 19:23

红影 发表于 2023-12-1 19:01
哦，找到了，在船儿的旁边，看着好淡啊

嗯，播放器是隐藏了，{:4_173:}

雨声 发表于 2023-12-1 19:23

红影 发表于 2023-12-1 19:02
谢谢雨声姐，也祝你周末快乐

妹妹来了，抱抱周末快乐！{:4_179:}

东篱闲人 发表于 2023-12-1 20:20

雨声 发表于 2023-12-1 19:17
谢谢东篱老师支持鼓励

别闹，咱不是老师。。。{:5_117:}

红影 发表于 2023-12-1 20:59

雨声 发表于 2023-12-1 19:20
谢谢妹妹的支持鼓励，周末快乐！

这个制作非常漂亮，看了让人心旷神怡{:4_187:}

红影 发表于 2023-12-1 21:01

雨声 发表于 2023-12-1 19:22
水波是加的特效mp4，不是我做的，我要会做这个还不得瑟s我

水波应该不是Mp4，这个是有代码的啊。是黑黑前面教的，雨声姐的这个帖子里用得特别好呢{:4_199:}

亦是金 发表于 2023-12-1 21:02

欣赏雨声美帖，陶醉了！欣赏学习了。{:4_187:}

查看完整版本: 【雨声音画】时光清浅，岁月静好