论坛 › 动画音画 › 【菲儿】（浅搁的画 ）致 樵歌

清茶煮雪 发表于 2024-1-24 15:52

【菲儿】（浅搁的画 ）致 樵歌

本帖最后由 菲儿 于 2024-1-24 17:18 编辑 <br /><br /><style>
#papa {
        margin: 130px 0 0 calc(50% - 881px);
        display: grid;
        place-items: center;
        width: 1600px;
        height:1000px;
        background: lightblue url('https://pic.imgdb.cn/item/65b0c10e871b83018afbfacb.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: 30%;
        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/1863507/00/25/40/5f6da8ecc2a33.mp4" autoplay="" loop="" muted=""></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178277" 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();
})();
</script>

清茶煮雪 发表于 2024-1-24 15:54

大师帮忙调一下

樵歌 发表于 2024-1-24 16:00

唯美的意境。音乐也喜欢，谢谢菲儿{:4_204:}

樵歌 发表于 2024-1-24 16:03

不是画搁浅了，是远方的憧憬迷茫了，没有动笔。

清茶煮雪 发表于 2024-1-24 16:04

本帖最后由 菲儿 于 2024-1-24 16:27 编辑

樵歌 发表于 2024-1-24 16:00
唯美的意境。音乐也喜欢，谢谢菲儿
实在不好意思，老是编辑不好帖子{:5_102:}，平时很少打开PS，做的不好但诚意满满，祝樵歌生活顺遂！

清茶煮雪 发表于 2024-1-24 16:06

谢谢樵歌送我那些漂亮的礼物，匆忙赶制一贴，祝愿樵歌生活美好，万事如意！{:4_171:}

清茶煮雪 发表于 2024-1-24 16:15

本帖最后由 菲儿 于 2024-1-24 16:20 编辑

樵歌 发表于 2024-1-24 16:03
不是画搁浅了，是远方的憧憬迷茫了，没有动笔。
也许吧，很多时候不知道该做什么了，就这样虚度了岁月！谢谢樵歌和花潮的友友们~遇见你们真好！

红影 发表于 2024-1-24 16:36

好漂亮的制作，菲儿有制图的功底，还能使用音画代码，这个帖子太美了{:4_187:}

红影 发表于 2024-1-24 16:37

这个好像遮挡了评分？位置太左了，能往右点就更好了{:4_187:}

红影 发表于 2024-1-24 16:51

菲儿 发表于 2024-1-24 15:54
大师帮忙调一下
帮菲儿调整好了，你原代码缺少闭合指令，帮你自己加在帖子里了。位置也帮你调了一下{:4_187:}

红影 发表于 2024-1-24 16:53

樵歌 发表于 2024-1-24 16:00
唯美的意境。音乐也喜欢，谢谢菲儿

师兄重新欣赏一下吧，这个帖子不但图图漂亮，菲儿还加了水波纹效果呢{:4_187:}

清茶煮雪 发表于 2024-1-24 17:03

红影 发表于 2024-1-24 16:51
帮菲儿调整好了，你原代码缺少闭合指令，帮你自己加在帖子里了。位置也帮你调了一下

谢谢红影帮帖子调好了，静止的画变得动起来了，帖子完全美化了，万分感叹在不言中~~

清茶煮雪 发表于 2024-1-24 17:07

本帖最后由 菲儿 于 2024-1-24 17:12 编辑

红影 发表于 2024-1-24 16:51
帮菲儿调整好了，你原代码缺少闭合指令，帮你自己加在帖子里了。位置也帮你调了一下
调出的水波效果很喜欢，谢谢影{:4_179:}，代码我收藏了……

梦油 发表于 2024-1-24 17:34

制作很有新意。

红影 发表于 2024-1-24 19:58

菲儿 发表于 2024-1-24 17:03
谢谢红影帮帖子调好了，静止的画变得动起来了，帖子完全美化了，万分感叹在不言中~~

不客气啊，去看了看正好知道怎么改，否则也帮不上呢{:4_173:}

红影 发表于 2024-1-24 19:59

菲儿 发表于 2024-1-24 17:07
调出的水波效果很喜欢，谢谢影，代码我收藏了……

那是你自己的帖子呢，樵歌还没来看改好的效果，我来艾特一下。@樵歌{:4_187:}

樵歌 发表于 2024-1-24 20:15

菲儿 发表于 2024-1-24 16:04
实在不好意思，老是编辑不好帖子，平时很少打开PS，做的不好但诚意满满，祝樵歌生活顺遂！

我对音画也是一点不懂呢。当时也看到帖子偏左了，但奇怪是点不开编辑。
音画的意境很好呢。谢谢啦{:4_204:}

樵歌 发表于 2024-1-24 20:17

菲儿 发表于 2024-1-24 16:06
谢谢樵歌送我那些漂亮的礼物，匆忙赶制一贴，祝愿樵歌生活美好，万事如意！

菲儿太客气啦。你是新来的，以后混熟了，都是和和美美花潮一个大家庭的。{:4_187:}

樵歌 发表于 2024-1-24 20:18

红影 发表于 2024-1-24 19:59
那是你自己的帖子呢，樵歌还没来看改好的效果，我来艾特一下。@樵歌

听到有喊声，就赶紧来看新效果了。很喜欢的。{:4_173:}

红影 发表于 2024-1-24 21:20

樵歌 发表于 2024-1-24 20:18
听到有喊声，就赶紧来看新效果了。很喜欢的。

本来就是这个效果呢，只是之前的有点偏位而已{:4_173:}

查看完整版本: 【菲儿】（浅搁的画 ）致 樵歌