论坛 › 音乐沙龙 › 滑雪大冒险（学习黑黑《半纸心事》效果）

红影 发表于 2023-12-1 00:15

滑雪大冒险（学习黑黑《半纸心事》效果）

<style>
#papa {
      margin: 70px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 640px;
      background: lightblue;
      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: 200px;
      opacity: .8;
       left: 430px;
      transform: rotate(145deg);
      transition: 1.5s;
}
.play_pic:nth-of-type(2) {
      width: 120px;
      top: 154px;
      right: 195px;
      filter: hue-rotate(240deg);
      opacity: .5;
      animation: rot 2s infinite var(--state);
}
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none;z-index: -1; opacity: 0.65; }
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot { from { transform: rotate(-20deg); } to { transform: rotate(5deg); } }
</style>

<div id="papa">
      <video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/13/94/V-139411-7D6DBDD1.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2028630748" autoplay loop></audio>
      <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
      <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/sunfl-2.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;font-size: 2em;',
      });
});

for(i = 0; i < 4; i++) {
      let img = document.createElement('img');
      img.className = 'play_pic';
      img.alt = '';
      img.src = 'https://pic.imgdb.cn/item/6568a58ec458853aef453523.png';
      img.style.cssText += `
                right: ${i * 43 + 143}px;
                bottom: ${123 - i * 31}px;
                width: ${i * 116 * 0.2 + 116 * 0.4}px;
                height: ${i * 220 * 0.2 + 220 * 0.4}px;
                filter: opacity(${Math.random() * 0.2 + 0.8}) 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 00:17

主要学习一下那一串图形的设计，我弄了4个滑雪小人，其他的还是原来效果。
想那串高宽的设置和位置还想了半天，我太不熟练了@马黑黑 {:4_173:}

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

这个JS语句真好，想弄多少个小人就能弄多少个，太好了{:4_187:}
假装用彩虹伞把房子遮起来，不锻炼不准回房间。{:4_173:}

红影 发表于 2023-12-1 00:20

明天下午要外出，连周末也有事了，只能抢时间做个，跟上作业进度{:4_204:}

小文 发表于 2023-12-1 08:45

欣赏并加油！

梦油 发表于 2023-12-1 09:20

四个滑雪者在画面上的位置很合理，左面有雪人，这样就很好地保持了画面的均衡布局。

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

小文 发表于 2023-12-1 08:45
欣赏并加油！

冬练三九夏练三伏，加强锻炼肯定好的{:4_173:}

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

梦油 发表于 2023-12-1 09:20
四个滑雪者在画面上的位置很合理，左面有雪人，这样就很好地保持了画面的均衡布局。

谢谢梦油，被你一说，倒也觉得挺好了呢{:4_187:}

冬天的雨 发表于 2023-12-1 11:26

美女你不愧是优秀学员，独立思考，创新精神，制作的作品 独具匠心，特别可以自己加png制作多样的人物，冬雨佩服至极，冬雨现在都没看懂代码，作业一下子完成不了{:4_203:}

冬天的雨 发表于 2023-12-1 11:26

向美女学习{:4_187:}

醉美水芙蓉 发表于 2023-12-1 13:16

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

真是活学活用的典范！这图好有趣。

梦油 发表于 2023-12-1 17:07

红影 发表于 2023-12-1 10:38
谢谢梦油，被你一说，倒也觉得挺好了呢

是挺好的。

红影 发表于 2023-12-1 20:38

冬天的雨 发表于 2023-12-1 11:26
美女你不愧是优秀学员，独立思考，创新精神，制作的作品 独具匠心，特别可以自己加png制作多样的人物，冬雨 ...

把图片放进去就行啊，还是挺简单的，然后就有很多个各种颜色的图片了，这个色相变化是黑黑设计好的{:4_187:}

红影 发表于 2023-12-1 20:38

冬天的雨 发表于 2023-12-1 11:26
向美女学习

谢谢冬小雨鼓励，被说得都不好意思了{:4_173:}

红影 发表于 2023-12-1 20:39

醉美水芙蓉 发表于 2023-12-1 13:16
欣赏学习红影精美音画！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-12-1 20:40

樵歌 发表于 2023-12-1 14:24
真是活学活用的典范！这图好有趣。

本来黑黑那帖子也很有趣，我只是把太阳花换成了滑雪小人{:4_173:}

红影 发表于 2023-12-1 20:42

梦油 发表于 2023-12-1 17:07
是挺好的。

谢谢梦油鼓励{:4_199:}

梦油 发表于 2023-12-2 16:48

红影 发表于 2023-12-1 20:42
谢谢梦油鼓励

影子朋友别客气。

焱鑫磊 发表于 2023-12-2 19:43

好好好！赞一个！{:4_187:}

查看完整版本: 滑雪大冒险（学习黑黑《半纸心事》效果）