论坛 › 欢乐水吧 › 又见老情人TO：小辣椒 （完成黑黑 Jannik - Grace 作业）

冬天的雨 发表于 2024-1-11 22:06

又见老情人TO：小辣椒 （完成黑黑 Jannik - Grace 作业）

<style>
#papa {
        margin: 120px 0 0 calc(50% - 681px);
        width:1200px;
        height: 798px;
        border: 1px solid gray;
        background: url('https://i.mp3.wf/view.php/3f0538c3a11c3243b487fbbe4d5c7393.jpg') no-repeat center/cover;
        box-shadow: 3px 6px 12px #000;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        left: calc(50% - 300px);
        width: 50%;
        height: 100%;
        background: url('https://i.mp3.wf/view.php/981568a8f30463a6d8b3f264e1e109b8.jpg') no-repeat center/cover;
        clip-path: circle(300px at 50% 50%); /*0 50%,50% 100%, 100% 50%, 50% 0 || 0 50%,50% 100%,100% 100%,100% 0, 50% 0*/
        opacity: .4;
        animation: move 20s forwards;
        --xx: 0;
}
#papa::after {
        transform: scale(-1,1);
        --xx: 50%;
}

@keyframes move {
        to { left: var(--xx); }
}

#dt1{ position: absolute; width:350px; height: 231px; top: 25px; left: 400px; }
</style>

<div id="papa">
         
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20240111115944.gif" alt="" />

</div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        var player = new ypP();
        player.setAudSrc('https://i.mp3.wf/view.php/8d339761d6a1edbcfedcedcaf2ce0f83.mp3');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                z-index: 10;
                opacity: .75;
                --btnBg: url('https://i.mp3.wf/view.php/4dab9c6839aa96c7d2aa9038b8314681.gif') no-repeat center/cover;
                --trackBg: transparent;
                --progBg:        Snow;
                --btnSize: 60px;
        `);
                player.setLrcCss('top: 75%; color: #4b5caa; --bg: MintCream; z-index: 9;');
       
        player.lrcAr = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
};
</script>

冬天的雨 发表于 2024-1-11 22:07

@小辣椒

{:4_170:}{:4_189:}{:4_196:}{:4_205:}{:4_172:}

冬天的雨 发表于 2024-1-11 22:08

@马黑黑

感谢马老师源码分享，冬雨学习做个作业

冬天的雨 发表于 2024-1-11 22:09

小辣椒，动图加上去了，视频背景我本来就会的，感觉这里不用加更加好{:4_170:}

冬天的雨 发表于 2024-1-11 22:09

小辣椒已经下了，等你明天上来表扬{:4_170:}

冬天的雨 发表于 2024-1-11 22:11

这首老情人特别好听也是合适小辣椒来欣赏{:4_170:}

马黑黑 发表于 2024-1-11 22:32

两个圆，可以是不同的头像，这回符合题意

红影 发表于 2024-1-11 23:09

这样的小图，一下子变2个了，冬小雨老情人那么多啊{:4_173:}

红影 发表于 2024-1-11 23:10

制作漂亮，欣赏冬小雨好帖{:4_199:}

马黑黑 发表于 2024-1-11 23:53

{:4_199:}

庶民 发表于 2024-1-12 05:11

老情人，新发现。

侃大山 发表于 2024-1-12 08:44

漂亮{:4_204:}

老谟深虑 发表于 2024-1-12 10:31

{:4_199:}

梦油 发表于 2024-1-12 17:04

冬雨朋友这精美的制作一定让“老情人”十分高兴。

四海八荒 发表于 2024-1-14 20:52

冬雨下次还是做一个：我究竟有几个好妹妹吧！

查看完整版本: 又见老情人TO：小辣椒 （完成黑黑 Jannik - Grace 作业）