论坛 › 欢乐水吧 › 地球之声 （学习黑黑电波效果）

红影 发表于 2022-9-12 15:10

地球之声 （学习黑黑电波效果）

<style>
#papa { left: -302px; top:120px; width: 1200px; height: 675px; background: gray url('https://pic.imgdb.cn/item/631df23616f2c2beb1717ba2.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 10px; left:40px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(to top right, rgba(0,255,0,.45), rgba(255,0,0,.65)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, snow, teal); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 250px; height: 2px; background: lightblue linear-gradient(to right,red,orange,blue,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(200,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: lightblue;}
#lrc { position: absolute; left: 80px; bottom: 60px; font: bold 1.5em sans-serif; color: skyblue; text-shadow: 2px 2px 2px #222; opacity: 1; animation: opa 1.5s infinite alternate; }
#wave { position: absolute; display: block; top: 70px; left:506px; }
@keyframes opa { to { opacity: .5;} }
.dongtu { position: absolute; right:250px; bottom: 20px; width:264px; height: 352px; mix-blend-mode: screen; }
</style>

<div id="papa">
      <div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
      <div id="lrc"></div>
      <svg id="wave" width="600" height="600">
                <circle cx="300" cy="300" r="0" fill="none" stroke="lightgreen" stroke-width="4">
                        <animate attributeName="r" begin="0s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" begin="0s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
                </circle>
                <circle cx="300" cy="300" r="0" fill="none" stroke="skyblue" stroke-width="3">
                        <animate attributeName="r" begin="0.5s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" begin="0.5s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
                </circle>
                <circle cx="300" cy="300" r="0" fill="none" stroke="lightblue" stroke-width="2">
                        <animate attributeName="r" begin="1s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" begin="1s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
                </circle>
                <circle cx="300" cy="300" r="0" fill="none" stroke="red" stroke-width="1">
                        <animate attributeName="r" begin="1.5s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" begin="1.5s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
                </circle>
      </svg>
<div style="position: absolute; left:590px; top: 0px; width:400px;opacity: 0.4;">
                <img alt="" src="https://pic.imgdb.cn/item/631df68c16f2c2beb176572e.gif" />
</div>
<div class="dongtu">
                <img alt="" src="https://pic.imgdb.cn/item/631df4de16f2c2beb17483f3.gif" />
</div>
</div><br><br><br><br><br><br>

<script>
let lrcAr = [
      ['0.00','地球之声 — 不停寻觅外星生命'],
      ['200.00','感谢支持']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1920483149.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
      tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60), sec = parseFloat(val % 60);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>

红芍药 发表于 2022-9-12 15:21

你们都好有才，一看就懂。{:4_199:}{:4_199:}

马黑黑 发表于 2022-9-12 15:22

设计精妙。赞。

代码组织不错。但，比较这两个加入的元素，其实就是两幅图，从严格的角度讲——

<div style="position: absolute; left:590px; top: 0px; width:400px;opacity: 0.4;">
                <img alt="" src="https://pic.imgdb.cn/item/631df68c16f2c2beb176572e.gif"/></div>
<div class="dongtu">
                <img alt="" src="https://pic.imgdb.cn/item/631df4de16f2c2beb17483f3.gif"/></div>

——可以发现三个问题：

① 书写不够规范。<div>...</div>如果分行，收尾符就应该独立一行。其实，因代码简单，可以不分行，两个图片连同其父div各写在一行里；

② img 标签的自闭合的规范写法应该是 <img alt="" src="url" />，“/” 之前要有一个空格，不知道是不是论坛系统吃掉了这个空格；

③ 如非必要，style尽量少用，像第二张图那样，通过CSS设定样式，再在HTML相应标签引用。

加林森 发表于 2022-9-12 15:26

来学习！好制作！{:4_199:}

顾-念 发表于 2022-9-12 18:17

壮观漂亮，想起电影《独行月球》了

梦缘 发表于 2022-9-12 20:23

有发射塔啊，精彩分享，问好！{:4_187:}

红影 发表于 2022-9-12 20:28

马黑黑 发表于 2022-9-12 15:22
设计精妙。赞。

代码组织不错。但，比较这两个加入的元素，其实就是两幅图，从严格的角度讲——


哦哦，关于书写的规范性，这个从没注意，下回记住了。
关于src="url" />有空格，不是系统吃掉的，也是之前从没注意过：）
关于style尽量少用这点，主要还是懒了一下，想css语句少点。

谢谢黑黑，这个几个问题都记下了，尤其书写规范问题，还是规范点好{:4_187:}

红影 发表于 2022-9-12 20:28

加林森 发表于 2022-9-12 15:26
来学习！好制作！

谢谢队长鼓励{:4_187:}

红影 发表于 2022-9-12 20:29

顾-念 发表于 2022-9-12 18:17
壮观漂亮，想起电影《独行月球》了

问好顾念。做之前也不知道做什么好，正好看到这张图图，就朝这个方向去找素材了{:4_173:}

红影 发表于 2022-9-12 20:30

梦缘 发表于 2022-9-12 20:23
有发射塔啊，精彩分享，问好！

也不知道那是不是发射塔，看到这个动图挺好看，就用上了。谢谢梦缘临帖{:4_187:}

加林森 发表于 2022-9-12 20:31

红影 发表于 2022-9-12 20:28
谢谢队长鼓励

不客气。挺好的！

千羽 发表于 2022-9-12 20:47

影儿做的真好，能加进自己的想像元素，俺能照做出来不乱码就很高兴了{:4_173:}

千羽 发表于 2022-9-12 20:49

那是向外星人发射信息的电波吗，想象力好丰富{:4_185:}

马黑黑 发表于 2022-9-12 20:51

红影 发表于 2022-9-12 20:28
哦哦，关于书写的规范性，这个从没注意，下回记住了。
关于src="url" />有空格，不是系统吃掉的，也是之 ...

自闭合标签，闭合符号是 / ，它之前，需要一个空格，虽然没有浏览器也能识别，但规范要求有。

红影 发表于 2022-9-12 22:11

千羽 发表于 2022-9-12 20:47
影儿做的真好，能加进自己的想像元素，俺能照做出来不乱码就很高兴了

通常仔细点都不会乱码{:4_173:}

红影 发表于 2022-9-12 22:12

千羽 发表于 2022-9-12 20:49
那是向外星人发射信息的电波吗，想象力好丰富

呵呵，看到这个效果不觉就想到这个了，跟羽儿一起去找外星人{:4_173:}

红影 发表于 2022-9-12 22:13

马黑黑 发表于 2022-9-12 20:51
自闭合标签，闭合符号是 / ，它之前，需要一个空格，虽然没有浏览器也能识别，但规范要求有。

嗯嗯，其实照规范做才是正确的{:4_187:}

马黑黑 发表于 2022-9-12 22:25

红影 发表于 2022-9-12 22:13
嗯嗯，其实照规范做才是正确的

那当然

红影 发表于 2022-9-13 19:52

马黑黑 发表于 2022-9-12 22:25
那当然

帖子里的我已经改过来了，谢谢黑黑{:4_187:}

马黑黑 发表于 2022-9-13 19:56

红影 发表于 2022-9-13 19:52
帖子里的我已经改过来了，谢谢黑黑

我看看

查看完整版本: 地球之声 （学习黑黑电波效果）