醉美水芙蓉 发表于 2023-12-1 14:21

我曾用心爱着你

<style>
#papa {
      margin: 0px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 640px;
      background: lightblue url('https://img.fy6b.com/2023/10/11/daf37ebbfc9c3.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
      --state: running;
}
.play_pic {
      position: absolute;
      cursor: pointer;
}
.play_pic:nth-of-type(1) {
      width: 300px;
      bottom: 320px;
right: 300px;
opacity: .8;
      transform: rotate(145deg);
      transition: 1.5s;
}
.play_pic:nth-of-type(2) {
      width: 200px;
      bottom: 10px;
      right: 10px;
      animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
      to { transform: rotate(1turn); }
}
</style>

<div id="papa">
      <audio id="aud" src="https://www.qqmc.com/mp3/music228640352.mp3" autoplay loop></audio>
      <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
      <img class="play_pic" src="http://qhxy.52qingyin.cn/file/20231127151117_32036.svg" alt="" />
</div>

<script>

let lrcAr = [
       ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,

];

let loadJs = (url,callback) => {
      let body = document.querySelector('body'), jsNode = document.createElement('script');
      jsNode.charset = 'utf-8';
      jsNode.setAttribute('src', url);
      body.appendChild(jsNode);
      jsNode.onload = () => callback();
};

loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
      HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'top: 20px; right: 200px; font-size: 2em;',
      });
});

for(i = 0; i < 7; i++) {
      let img = document.createElement('img');
      img.className = 'play_pic';
      img.alt = '';
      img.src = 'http://qhxy.52qingyin.cn/file/20231127151117_32036.svg';
      img.style.cssText += `
                left: ${i * 10 + 10}px;
                top: ${i * 5 + 10}px;
                width: ${i * 50 + 50}px;
                height: ${i * 50 + 50}px;
                filter: opacity(${Math.random() * 0.5 + 0.5}) hue-rotate(${Math.random() * 360}deg);
                animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
      `;
      papa.appendChild(img);
}

</script>

樵歌 发表于 2023-12-1 14:45

又是一份优秀作业！{:4_187:}

醉美水芙蓉 发表于 2023-12-1 14:51

樵歌 发表于 2023-12-1 14:45
又是一份优秀作业！

樵歌好久不见！祝快乐每一天！

红影 发表于 2023-12-1 19:10

奇怪，我这里能看到七色伞，另一种效果看不全。可能我电脑安全级别设得太高了{:4_203:}

醉美水芙蓉 发表于 2023-12-1 19:48

红影 发表于 2023-12-1 19:10
奇怪，我这里能看到七色伞，另一种效果看不全。可能我电脑安全级别设得太高了

谢谢红影告知！

红影 发表于 2023-12-1 21:13

醉美水芙蓉 发表于 2023-12-1 19:48
谢谢红影告知！

可能是我自己电脑的问题吧，水芙蓉美女自己能看到么？{:4_204:}
页: [1]
查看完整版本: 我曾用心爱着你