朵拉 发表于 2023-12-24 16:38

悬 溺（马黑黑原创）

本帖最后由 朵拉 于 2023-12-24 16:53 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 561px);
      width: 960px;
      height: 600px;
      box-shadow: 4px 8px 28px gray;
      background: url('https://pic.imgdb.cn/item/6587f120c458853aefc586d0.jpg');
      display: grid;
      place-items: center;
      position: relative;
}
li-zi {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: navy;
      opacity: .75;
      animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
      from { transform: translate(0,0); }
      to { transform: translate(var(--xx),var(--yy)); }
}
</style>

<div id="papa"></div>

<script>
let total = 90;
let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10;
Array.from({length: total}).forEach((item,key) => {
      let rad = (Math.PI / 180) * 360 / total;
      item = document.createElement('li-zi');
      item.style.cssText += `
                --xx: ${rx * Math.cos(rad * key)}px;
                --yy: ${ry * Math.sin(rad * key)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
      `;
      papa.appendChild(item);
});

let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
      let myplayer = new mPlayer();
      myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=2094790347');
      myplayer.setBtnCss(`
                background: url('https://638183.freep.cn/638183/t23/btn/hshx.png') no-repeat center/cover;
                width: 200px;
                height: 200px;
                filter: hue-rotate(200deg) opacity(.8);
      `);
      myplayer.setLrcCss('top:10px; left:10px; color: lightblue; --bg: snow;');
      myplayer.lrcAr = [,];
};
</script>

朵拉 发表于 2023-12-24 16:54

@马黑黑
马师好 学生交作业，请指正哈~~{:4_190:}

红影 发表于 2023-12-24 17:15

漂亮，欣赏朵宝好帖{:4_204:}

马黑黑 发表于 2023-12-24 18:06

朵拉 发表于 2023-12-24 16:54
@马黑黑
马师好 学生交作业，请指正哈~~

{:4_199:}

小辣椒 发表于 2023-12-24 20:05

欣赏朵拉漂亮的制作{:4_199:}

千羽 发表于 2023-12-24 21:22

给好学生朵拉点赞送花花{:4_187:}{:4_178:}
页: [1]
查看完整版本: 悬 溺（马黑黑原创）