三月的阳光 发表于 2023-9-19 22:15

春泥（DJ版)

本帖最后由 三月的阳光 于 2023-9-19 22:16 编辑 <br /><br /><style>
      #papa { margin: 0 0 0 calc(50% - 513px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/65099b7dc458853aef2f4bb1.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
      .meteor { position: absolute; width: 2px; height: 2px; background: linear-gradient(to right, transparent, lightblue); transform: rotate(30deg); animation: fall var(--du) var(--delay) infinite linear; }
      @keyframes fall { to { transform: translate(100px,100px) rotate(40deg); width: var(--ww); opacity: 0; } }
#vid { position: absolute; width: 110%; height: 120%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>

<div id="papa">
<video id="vid" src="https://i.mp3.wf/view.php/b06ead21117fe554d7853345f9d632f4.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="meteor"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1929093477.mp3" autoplay loop></audio>

<script>
      
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
      script.charset = 'utf-8';
      document.head.appendChild(script);
      let geci = [
        ['0.00', ' 春泥（DJ版）',1.37],
['1.44', '多想提起勇气好好地呵护你',3.73],
['5.37', '不让你受委屈苦也愿意',3.76],
['9.33', '那些痛的记忆落在春的泥土里',3.85],
['13.38', '滋养了大地开出下一个花季',3.76],
['17.34', '风中你的泪滴滴滴落在回忆里',3.88],
['21.42', '让我们取名叫做珍惜',19.72],
['42.18', '漫天的话语纷乱落在耳际',3.59],
['45.96', '你我沉默不回应',4.02],
['50.19', '牵你的手你却哭红了眼睛',3.59],
['53.97', '路途漫长无止尽',3.31],
['57.45', '多想提起勇气好好地呵护你',3.70],
['61.35', '不让你受委屈苦也愿意',3.82],
['65.37', '那些痛的记忆落在春的泥土里',3.82],
['69.39', '滋养了大地开出下一个花季',3.76],
['73.35', '风中你的泪滴滴滴落在回忆里',3.85],
['77.40', '让我们取名叫做珍惜',19.75],
['98.19', '迷雾散尽一切终于变清晰',3.59],
['101.97', '爱与痛都成回忆',3.99],
['106.17', '遗忘过去繁花灿烂在天际',3.59],
['109.95', '等待已有了结局',3.73],
['113.88', '我想提起勇气好好地呵护你',3.28],
['117.33', '不让你受委屈苦也愿意',3.85],
['121.38', '那些痛的记忆落在春的泥土里',3.82],
['125.40', '滋养了大地开出下一个花季',3.79],
['129.39', '风中你的泪滴滴滴落在回忆里',3.82],
['133.41', '让我们取名叫做珍惜',3.88],
['137.49', '那些痛的记忆落在春的泥土里',3.88],
['141.57', '滋养了大地开出下一个花季',3.79],
['145.56', '风中你的泪滴滴滴落在回忆里',3.65],
['149.40', '让我们取名叫做珍惜',4.5]
];
      script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: 550px; color: lightblue; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4));',
                        fs_css: 'top: 470px; color: #ddd; background: #000;',
                        player_css: `
                              bottom: 110px;
                              border-width: 0;
                              color:DarkOrchid;
                              --size: 140px;
                              --bRad: 70%;
                              --track: gray;
                              --prog: lightblue;
                              --btnBg: linear-gradient(DarkOrchid, snow);
                        `,
                        lizi: { color1: 'DarkOrchid', color2: 'silver' },
                });
      };
      [...new Array(40).keys()].forEach((e,k) => {
                e = document.createElement('span');
                e.className = 'meteor';
                e.style.cssText += `
                        left: ${100 * Math.random()}%;
                        top: ${20 * Math.random()}%;
                        --du: ${6 + Math.random() * 4}s;
                        --delay: -${Math.random() * 6}s;
                        --ww: ${50 + Math.random() * 50}px;
                `;
                papa.appendChild(e);
      });
})();

</script>

liumang 发表于 2023-9-19 23:24

{:5_150:}


页: [1]
查看完整版本: 春泥（DJ版)