论坛 › 马黑黑教程专版 › 【弹指一挥间】 学习黑黑老师代码作业

千羽 发表于 2022-10-10 19:22

【弹指一挥间】 学习黑黑老师代码作业

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic1.imgdb.cn/item/6342ebef16f2c2beb160ddd7.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#tit { position: absolute; left: 220px; top: 220px; font: bold 3em sans-serif; color: #00E5EE; text-shadow: 2px 2px 4px #fcfcfc; letter-spacing: 2px; }
#btnplay { position: absolute; bottom: 40px; left: 100px; width: 100px; height: 100px; border-radius: 50%; box-shadow: 20px 15px 0 0 yellow; cursor: pointer; animation: swing 1s linear infinite alternate; }
#btnplay::before { position: absolute; content: ''; left: 20px; top: 15px; width: 100%; height: 100%;}
#btnplay::after { position: absolute; content: ''; left: 30px; top: 30px; width: 40%; height: 40%; border-radius: 50%; background: yellow; box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 snow; }
@keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
</style>

<div id="papa">
      <span id="tit">弹指一挥间</span>
      <span id="btnplay" title="播放/暂停"></span>
</div>

<script>
(function() {
      let aud = new Audio();
      aud.src = 'http://music.163.com/song/media/outer/url?id=28952258.mp3';
      aud.loop = true;
      aud.play();
      btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
      btnplay.onclick = () => mplay();
      let mplay = () => aud.paused ? (aud.play(), btnplay.style.animationPlayState = 'running') : (aud.pause(), btnplay.style.animationPlayState = 'paused');
}());
</script>

红影 发表于 2022-10-10 20:01

羽儿的帖子真漂亮，文字和图片十分搭配，画面靓丽，很赞{:4_204:}

千羽 发表于 2022-10-10 20:26

红影 发表于 2022-10-10 20:01
羽儿的帖子真漂亮，文字和图片十分搭配，画面靓丽，很赞

谢谢影儿啦，这是以前的图，改了一下{:4_173:}

红影 发表于 2022-10-10 20:37

千羽 发表于 2022-10-10 20:26
谢谢影儿啦，这是以前的图，改了一下

羽儿的图图总是那么色彩艳丽，很美的{:4_204:}

千羽 发表于 2022-10-10 20:47

红影 发表于 2022-10-10 20:37
羽儿的图图总是那么色彩艳丽，很美的

影儿，刚才换冬衣成功{:4_173:}

小辣椒 发表于 2022-10-10 20:53

欣赏千羽的精美制作~~~单曲播放器也是特别美{:4_199:}

千羽 发表于 2022-10-10 21:03

小辣椒 发表于 2022-10-10 20:53
欣赏千羽的精美制作~~~单曲播放器也是特别美

谢谢小辣椒啦，这播放器是黑黑老师做的{:4_187:}

红影 发表于 2022-10-10 21:10

千羽 发表于 2022-10-10 20:47
影儿，刚才换冬衣成功

这个冬衣很漂亮的{:4_187:}

千羽 发表于 2022-10-10 21:11

红影 发表于 2022-10-10 21:10
这个冬衣很漂亮的

哈哈，天冷了换上冬装{:4_173:}

相约爱晚亭 发表于 2022-10-10 21:35

欣赏音画佳作！

红影 发表于 2022-10-10 21:43

千羽 发表于 2022-10-10 21:11
哈哈，天冷了换上冬装

好看，很符合羽儿呢{:4_187:}

醉美水芙蓉 发表于 2022-10-10 21:55

千羽 发表于 2022-10-10 21:55

相约爱晚亭 发表于 2022-10-10 21:35
欣赏音画佳作！

问好相约爱晚亭 ，谢谢了{:4_187:}

千羽 发表于 2022-10-10 21:56

红影 发表于 2022-10-10 21:43
好看，很符合羽儿呢

我再给弄{:4_173:}亮一点

千羽 发表于 2022-10-10 21:57

醉美水芙蓉 发表于 2022-10-10 21:55
这个图图很漂亮！千羽真棒！

这是用以前做的图，缩小了做的{:4_187:}

红影 发表于 2022-10-10 22:09

千羽 发表于 2022-10-10 21:56
我再给弄亮一点

这个颜色冬天穿了一定很靓丽{:4_187:}

千羽 发表于 2022-10-11 19:11

红影 发表于 2022-10-10 22:09
这个颜色冬天穿了一定很靓丽

影儿，冬天穿这色的人挺多的{:4_185:}

红影 发表于 2022-10-11 20:44

千羽 发表于 2022-10-11 19:11
影儿，冬天穿这色的人挺多的

特别衬肤色呢。

马黑黑 发表于 2022-10-11 23:20

浅灰色衣服不好洗，需要用到蓝月亮{:5_117:}

千羽 发表于 2022-10-17 19:47

红影 发表于 2022-10-11 20:44
特别衬肤色呢。

嗯，影儿也穿哈{:4_185:}

查看完整版本: 【弹指一挥间】 学习黑黑老师代码作业