论坛 › 动画音画 › 【菲儿单图】今生只愿共你笑

清茶煮雪 发表于 2025-6-27 20:41

【菲儿单图】今生只愿共你笑

</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_424259">

<style>
#papa {
        margin: 0 0 0 calc(50% - 880px);
        border: 1px solid gray;
        width: 1600px;
      height: 900px;
      top:130px;
      background: #666 url('https://pic1.imgdb.cn/item/685e8a6658cb8da5c8788c4d.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px 0 #000;
        position: relative;
        overflow: hidden;
        display: grid;
        place-items: center;
        --clipPath: '';
}
li-zi {
    position: absolute;
    width: 6px;
    height: 12px;
    border-radius: 100% 60%;
    background: tan;
    right:10px;
    animation: imov 6s infinite;
}
@keyframes moving {
    from { opacity: .0; transform: rotate(00) translate(0,0); }
    to { opacity: 1; transform: rotate(var(--deg)) translate(var(--x0),var(--y0)); }
}
@keyframes rotating {
    to { transform: rotate(-360deg); }
}
   #player {
    position: absolute;
    right:280px;
    top:520px;
    width: 200px;
    height: 200px;
    cursor: pointer;
    background: url('http://qhxy.52qingyin.cn/file/20231216191230_82253.svg') no-repeat center/cover;
    animation: rotating 18s linear infinite var(--state);
}
#vid {
        position: absolute;
        width: 30%;
        height: 30%;
                right:130px;
                top:480px;
        border-radius: 2%;
        opacity: .96;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
}
</style>

<div id="papa">
        <div id="player" title="播放/暂停"></div>
        <css-doodle id="lrc">
                :doodle {
                        @size: auto 4em;
                        position: absolute;
                        bottom: 10px;
                                        opacity: .56;
                        --geci: 'css-doodle player';
                        --motion: cover2;
                        --tt: 1s;
                }
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: AliceBlue;
                        font: bold 2em sans-serif;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        width: 0;
                        color:LightSkyBlue;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086e0d3cf27.mp4" autoplay="" loop="" muted=""></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27853883" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
(function() {
let all = 360;
for(let i = 0; i < all; i++) {
    let movBall = document.createElement('li-zi');
    movBall.style.cssText += `
      --x0: -600px;
      --y0: -700px;
      --deg: ${Math.random() * 105}deg;
      left: 600px;
      bottom: 300px;
      left: 600px;
      bottom: 0px;
      background: linear-gradient( to left, rgba(135,206,250,.8), rgba(225,225,225,.15));
      animation: moving ${Math.random() * 10 + 10}s -${Math.random() * 120}s infinite var(--state);
    `;
    papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), vid.play(), player.title='暂停') : (aud.pause(), vid.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);

let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>
<br><br><br><br><br><br><br><br></td></tr></table>

樵歌 发表于 2025-6-27 21:22

面朝大海，春暖花开。{:4_187:}

樵歌 发表于 2025-6-27 21:24

漂亮的背景下，有小气泡粒子飞舞，像极撒各天空的花朵。

樵歌 发表于 2025-6-27 21:26

那个播放器也绚丽的旋转着，很亮眼！

樵歌 发表于 2025-6-27 21:27

这歌好听，不知道我唱出来 是个啥子味道{:4_189:}

红影 发表于 2025-6-27 22:41

粒子喷泉，黑黑很前面的效果呢，被菲儿做得很漂亮。画面布局十分合理，视频的运用也很漂亮。
欣赏菲儿精美的帖子{:4_199:}

偶然~ 发表于 2025-6-27 23:57

本帖最后由 偶然~ 于 2025-6-28 00:00 编辑 <br /><br />菲儿制作的音画作品真是精美绝伦！画面与音乐相得益彰‌，雨中的海边场景细腻动人，每一帧都如诗如画。‌音乐悠扬‌，与画面完美融合，营造出一种既宁静又梦幻的氛围。‌情感表达深刻‌，让人感受到菲儿的用心与才情。

偶然~ 发表于 2025-6-27 23:58

菲儿的才华令人赞叹，‌对艺术的热爱与追求‌在这个作品中体现得淋漓尽致。这样的作品不仅是一场视觉与听觉的盛宴，更是心灵的触动。期待菲儿能带来更多令人惊艳的作品！辛苦了

清茶煮雪 发表于 2025-6-30 17:07

樵歌 发表于 2025-6-27 21:26
那个播放器也绚丽的旋转着，很亮眼！

播放器的出处是你们这里{:4_173:}

清茶煮雪 发表于 2025-6-30 17:07

樵歌 发表于 2025-6-27 21:24
漂亮的背景下，有小气泡粒子飞舞，像极撒各天空的花朵。

是呀代码效果可漂亮了{:5_106:}

清茶煮雪 发表于 2025-6-30 17:08

樵歌 发表于 2025-6-27 21:22
面朝大海，春暖花开。

祝樵歌赏画愉快 新周快乐！{:4_180:}

清茶煮雪 发表于 2025-6-30 17:09

红影 发表于 2025-6-27 22:41
粒子喷泉，黑黑很前面的效果呢，被菲儿做得很漂亮。画面布局十分合理，视频的运用也很漂亮。
欣赏菲儿精美 ...

谢谢影儿鼓励{:4_171:}祝赏画愉快 新周快乐！{:4_204:}

清茶煮雪 发表于 2025-6-30 17:09

偶然~ 发表于 2025-6-27 23:57
本帖最后由 偶然~ 于 2025-6-28 00:00 编辑 菲儿制作的音画作品真是精美绝伦！画面与音乐相得益彰‌ ...

谢谢偶然老师美评{:4_180:}

清茶煮雪 发表于 2025-6-30 17:10

偶然~ 发表于 2025-6-27 23:58
菲儿的才华令人赞叹，‌对艺术的热爱与追求‌在这个作品中体现得淋漓尽致。这样的作品不仅是一场 ...

谢谢老师鼓励！祝赏画愉快 新周快乐！{:4_180:}

红影 发表于 2025-6-30 20:41

菲儿 发表于 2025-6-30 17:09
谢谢影儿鼓励祝赏画愉快 新周快乐！

谢谢菲儿带来的精彩，晚上好{:4_187:}

樵歌 发表于 2025-7-2 20:15

菲儿 发表于 2025-6-30 17:08
祝樵歌赏画愉快 新周快乐！

不用祝，我看了画儿也愉快{:4_189:}

樵歌 发表于 2025-7-2 20:16

菲儿 发表于 2025-6-30 17:07
是呀代码效果可漂亮了

菲儿也会代码了，真得使劲祝一下{:4_173:}

樵歌 发表于 2025-7-2 20:17

菲儿 发表于 2025-6-30 17:07
播放器的出处是你们这里

到处都有宝藏的，就看你能挖到不{:4_189:}

清茶煮雪 发表于 2025-7-18 16:25

樵歌 发表于 2025-7-2 20:16
菲儿也会代码了，真得使劲祝一下

我套用的代码 离会用 差太远啦{:4_173:}

清茶煮雪 发表于 2025-7-18 16:25

樵歌 发表于 2025-7-2 20:17
到处都有宝藏的，就看你能挖到不

我就到处捡 结果一看 还是你们这里出去滴{:4_173:}

查看完整版本: 【菲儿单图】今生只愿共你笑