朵拉 发表于 2023-9-19 08:46

如 谜（马黑黑原创）

本帖最后由 朵拉 于 2023-9-19 08:52 编辑 <br /><br /><style>

#mydiv {
    margin: 0 0 0 calc(50% - 593px);
    width: 1000px;
    height: 600px;
    background: url('https://pic.imgdb.cn/item/6508ee11204c2e34d3c8ccec.jpg') no-repeat center/cover;
    box-shadow: 0 0 10px #333;
    overflow: hidden;
    position: relative;
    --state: paused;
}
lz-3d {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: gray;
    transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
    animation: o2C var(--du) var(--delay) infinite linear var(--state);
}

@keyframes o2C {
    to { transform: perspective(200px) rotate(0) translate3d(0,0,0); }
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2077483068" autoplay loop></audio>

<script>

(function(){
    let total = 120, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;

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

    Array.from({length: total}).forEach( (item,key) => {
      item = document.createElement('lz-3d');
      item.style.cssText += `
            background: #${Math.random().toString(16).substr(-6)};
            --xx: ${Math.random() * ww}px;
            --yy: ${Math.random() * hh}px;
            --zz: ${150 + Math.random() * 50}px;
            --deg: ${360 + Math.random() * 360}deg;
            --du: ${15 + Math.random() * 15}s;
            --delay: ${Math.random() * -15}s;
      `;
      mydiv.appendChild(item);
    });

    script.onload = () => {
      HCPlayer({
            papa: '#mydiv',
            player_css: 'left: 10px; bottom: 10px;',
            img: {
                enter: '',/* 进入全屏按钮地址 */
                quit: '',/* 退出全屏按钮地址 */
                play: '',/* 播放按钮地址 */
                pause: '',/* 暂停按钮地址 */
            }
      });
    }
})();

</script>

朵拉 发表于 2023-9-19 08:53

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

朵拉 发表于 2023-9-19 08:58

天龙八部和许嵩的十三年：

2010.4.11 第一首《半城烟沙》
2011.9.20 第二首《宿敌》
2019.10.13第三首《雨幕》
2020.10.12第四首《放肆》
2022.10.26第五首《曼陀山庄》
2023.8.29 第六首《如谜》

“江湖前路如谜，只愿能与君偕行。”

红影 发表于 2023-9-19 09:11

背景图选得很漂亮。欣赏朵拉好帖{:4_187:}

马黑黑 发表于 2023-9-19 12:01

朵拉 发表于 2023-9-19 08:53
@马黑黑
马师 早上好，学生交作业，请指正哈

很精美，赞一个
页: [1]
查看完整版本: 如 谜（马黑黑原创）