岩新新 发表于 2024-2-20 15:41

程佳佳 - 别错过 (DJ版)

<style>
#papa {
        margin:150px 0 0 calc(50% - 761px);
        width: 1400px;
        height: 798px;
        background: url('http://webftp.bbs.hnol.net/yx2021/pj97/8.gif') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#mplayer {
        position: absolute;
        top: 40px;
        left: calc(50% - 100px);
        width: 200px;
        height: 200px;
        border-style: dotted double ridge;
        border-color: olive green lightgreen;
        border-width: 10px 20px;
        border-radius: 50%;
        background: url('http://webftp.bbs.hnol.net/yx2021/pj97/7fd4ebd552194f7898d0b17d13be190e.gif') no-repeat center/cover;
        animation: borderSize .3s linear infinite alternate var(--state);
        cursor: pointer;
}

#dt3{ position: absolute; width: 0px; height: 0px; top: 649px; left: 0px; }
@keyframes borderSize {
        from { border-width: 10px 20px; border-color: olive green lightgreen; }
        to { border-width: 20px 10px; border-color: red orange green; }}
.txtBg {
      position: absolute;
      left: 760px;
       top: 90px;
      font-size: 2.8rem;
      color: transparent;
      width: 600px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-image: linear-gradient(90deg,green, olive, tomato, green);
      background-size: 600px 100px;
      background-position: 600px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}

</style>

<div id="papa">

<img id="dt3" src="" alt="" />

<div class="txtBg">别错过</div>
        <audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/02/20/cdc0a256f9b3cb07212aaf4a1cf996a2.mp3 " autoplay loop></audio>
        <div id="mplayer"></div>
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '#mplayer',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 60px; font-size: 2.0em;--bg: linear-gradient(rgba(255,69,0,.15),rgba(255,69,0,.25)); color: Snow;',
        });
};
var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);

[...new Array(9).keys()].forEach(key => {
    var item = document.createElement('div');
    item.className = 'doll';
    var deg = key % 2 == 0 ? -360 : 360;
    item.style.cssText += `
      width: ${size}px;
      height: ${size}px;
      background-color: transparent;
      --duration: ${Math.random() * 10 + 10}s;
      --delay: ${Math.random() *-2}s;
      --deg: ${deg}deg;
    `;
    mplayer.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused      
}

</script>

红影 发表于 2024-2-20 18:07

漂亮的制作，欣赏新新好帖{:4_187:}

醉美水芙蓉 发表于 2024-2-20 19:05

小辣椒 发表于 2024-2-20 20:12

欢迎岩新新一起来学习一起玩，你这图片是后面没有s的，我论坛看不见，复制代码电脑预览了一下。，很用心的制作

小辣椒 发表于 2024-2-20 20:17

这个播放器代码我修改过，现在我看见你那个钟是圆的，我给你尺寸修改了一下，现在都是width:200 height: 200，效果看上去就好多了
原来是width: 230px;height: 190px;
       
页: [1]
查看完整版本: 程佳佳 - 别错过 (DJ版)