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

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

<style>
#papa {
        margin: 0 0 0 calc(50% - 961px);
        display: grid;
        place-items: center;
        width: 1700px;
        height:900px;
top:130px;
        background: lightblue url('https://www.dlbbs.com/data/attachment/forum/202312/01/221016d9q9qhmxmzbn90i5.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 22:10


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

12月祝朋友每天好心情！{:10_402:}

蜻蜓 发表于 2023-12-1 22:35

雨声的音画都好看{:10_402:}

愤怒の葡萄 发表于 2023-12-1 22:38

本帖最后由 愤怒の葡萄 于 2023-12-1 22:40 编辑

这个音画作品有水波纹的，太漂亮了，给雨声点赞！~~~

楚心兰 发表于 2023-12-1 23:12

雨声姐姐的音画唯美
页: [1]
查看完整版本: 【雨声音画】时光清浅，岁月静好