花飞飞 发表于 2025-1-21 11:15

【黑师代码】丽花影（大家新春快乐~）

本帖最后由 花飞飞 于 2025-1-21 20:12 编辑 <br /><br /><style>
      @import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
      #tz { --state: running; margin: 130px 0 30px calc(50% - 931px);width:1700px; height: 900px;background: url('https://642303.freep.cn/642303/tu/20250121lihuying.webp') no-repeat center/cover; overflow: hidden;}
      #fsbtn { top: -120px; }
      #lrc {left: 50%;transform: translateX(-50%);bottom: 30px; --bg: linear-gradient(Wheat,SlateBlue); color: silver;font: bold 2.0em cursive;opacity: .86; }
      #mplayer { left: 6%; bottom:32%;width: 60px; height: 60px; display: grid; place-items: center;opacity: .46; }
      .feather { position: absolute; width: 30px; height: 30px; background: url('https://642303.freep.cn/642303/tu/th0120.png') no-repeat center/cover; }
       .vid { position: absolute; width: 100%; height: 100%; -webkit-mask: linear-gradient(to bottom,transparent,red); object-fit: cover;mix-blend-mode: screen;opacity: .46;}
</style>

<div id="tz" class="pa">
      <audio src="https://music.163.com/song/media/outer/url?id=482933652.mp3"></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb96f484078.mp4" autoplay loop muted></video>
      <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <div id="mplayer" class="mplayer"></div>
      <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
      import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
      import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
      var lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];
      var total = 6, a = 360 / total;
      for(var i = 0; i < total; i++) {
                var f = document.createElement('span');
                f.className = 'feather';
                f.style.cssText += `transform: rotate(${i * a}deg) translateY(-30px);`;
                mplayer.appendChild(f);
      }
      hcplay(tz, lrcAr);
      fscreen.fs(tz, fsbtn);
</script>

花飞飞 发表于 2025-1-21 11:16

@马黑黑 白老师瞧一下这个作业。。。还是《致你》的复合按纽模板

梦江南 发表于 2025-1-21 11:23

太美了！

樵歌 发表于 2025-1-21 13:04

用代码创作，把画面，音乐的意境滆为一体！做到这点没有一定的艺术修养，是不可能的。

红影 发表于 2025-1-21 16:38

这场景很奇妙，很有意境，欣赏飞飞好帖，感谢你的美好祝福{:4_199:}

红影 发表于 2025-1-21 16:39

借飞飞好帖，同祝大家新春快乐{:4_177:}

马黑黑 发表于 2025-1-21 19:45

有一个MP4打不开，原因是地址中，https 多了一个空格：

h ttps://img.tukuppt.com/video_show/2916847/00/17/74/5ecdddf687cca.mp4" autoplay loop muted

花飞飞 发表于 2025-1-21 20:01

马黑黑 发表于 2025-1-21 19:45
有一个MP4打不开，原因是地址中，https 多了一个空格：

h ttps://img.tukuppt.com/video_show/2916847/0 ...

这是个花瓣飘落，加了后又觉画面有点杂，就加个空格让它先不显示。。觉得不用花乱飞也挺清爽，、
后来整句忘了删除。。
白老师查我代码了。。{:4_173:}基本全抄，改变不大。。

花飞飞 发表于 2025-1-21 20:01

红影 发表于 2025-1-21 16:38
这场景很奇妙，很有意境，欣赏飞飞好帖，感谢你的美好祝福

影子新春快乐呀。。{:4_204:}

花飞飞 发表于 2025-1-21 20:01

樵歌 发表于 2025-1-21 13:04
用代码创作，把画面，音乐的意境滆为一体！做到这点没有一定的艺术修养，是不可能的。

感谢樵管支持鼓励{:4_187:}

花飞飞 发表于 2025-1-21 20:02

梦江南 发表于 2025-1-21 11:23
太美了！

感谢梦江南临贴支持{:4_190:}

马黑黑 发表于 2025-1-21 20:06

花飞飞 发表于 2025-1-21 20:01
这是个花瓣飘落，加了后又觉画面有点杂，就加个空格让它先不显示。。觉得不用花乱飞也挺清爽，、
后来整 ...

这个再控制台会出错的

花飞飞 发表于 2025-1-21 20:08

马黑黑 发表于 2025-1-21 20:06
这个再控制台会出错的

啊，后来我看这个贴子老出得慢吞吞的，难道跟这个有关？那我去删掉。。

马黑黑 发表于 2025-1-21 20:09

花飞飞 发表于 2025-1-21 20:08
啊，后来我看这个贴子老出得慢吞吞的，难道跟这个有关？那我去删掉。。

是的，有极大的关系：但凡出错的，浏览器都尝试去追踪原因

花飞飞 发表于 2025-1-21 20:13

马黑黑 发表于 2025-1-21 20:09
是的，有极大的关系：但凡出错的，浏览器都尝试去追踪原因

容错不够啊。。它还追原因，太智能啦。
无效的直接跳过去不好么{:4_170:}

马黑黑 发表于 2025-1-21 21:00

花飞飞 发表于 2025-1-21 20:13
容错不够啊。。它还追原因，太智能啦。
无效的直接跳过去不好么

致命错误不能容忍。

你这类问题的处理方法是给个注释，HTML的注释是酱紫：

<!-- html代码 -->

红影 发表于 2025-1-21 22:00

花飞飞 发表于 2025-1-21 20:01
影子新春快乐呀。。

谢谢飞飞，一起快乐{:4_187:}

小辣椒 发表于 2025-1-21 22:24

飞飞现在看起来是专攻图图了，图图越来越漂亮了，背景层次感明显，标题字也是漂亮，赞的~

花飞飞 发表于 2025-1-22 09:24

马黑黑 发表于 2025-1-21 21:00
致命错误不能容忍。

你这类问题的处理方法是给个注释，HTML的注释是酱紫：

这个好，收了。这三大部分注释长的还不太一样{:4_173:}

花飞飞 发表于 2025-1-22 10:20

小辣椒 发表于 2025-1-21 22:24
飞飞现在看起来是专攻图图了，图图越来越漂亮了，背景层次感明显，标题字也是漂亮，赞的~
{:4_170:}小辣椒又夸啦，开心一下
页: [1] 2
查看完整版本: 【黑师代码】丽花影（大家新春快乐~）