加林森 发表于 2022-6-8 21:28

《天空之城》- 宫崎骏

<style>

.outer { left: -70px; width: 900px; height: 640px; box-shadow: 2px 2px 4px #333; background: teal url('https://pic.imgdb.cn/item/62a0a63d094754312977aa70.jpg') no-repeat; position: relative; }
.ele1 { position: absolute; left: 120px; top: 100px; width: 43px; height: 43px; border-radius: 50%;background:#44cef6 linear-gradient(transparent 49%,rgba(255,0,0,.65) 50%,transparent 0) no-repeat; background-size: 0% 100%; box-shadow: 5px 5px 30px 0 gray; cursor:pointer; }
.ele1::before, .ele1::after { position: absolute; content: ''; width: inherit; height: inherit; border-radius: inherit; }
.ele1::before { background: linear-gradient(transparent,rgba(0,0,0,0)); animation: flash 1s linear infinite; }
.ele1::after { background: radial-gradient(circle at 30% 30%,transparent,rgba(0,255,0,.25)); }
@keyframes flash { to { background: linear-gradient(transparent,rgba(0,0,0,.6)); } }

</style>

<div class="outer">
      <div class="ele1"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/84998.mp3" autoplay="autoplay" loop="loop"></audio>
<div style="position: absolute; left:420px; top: 900px; width:75px; height: 20px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif"/></div>
</div>
<script>

let ele1 = document.querySelector('.ele1'), aud = document.querySelector('#aud');
ele1.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate',() => ele1.style.backgroundSize = 100 * aud.currentTime / aud.duration + '% 100%');

</script>

加林森 发表于 2022-6-8 21:29

   《天空之城》是由吉卜力工作室、德间书店联合制作的动画电影，由宫崎骏执导，田中真弓、横泽启子、初井言荣、寺田农等担任主要配音。该片主要讲述了主人公少女希达和少年帕祖以及海盗、军队、穆斯卡等人寻找天空之城拉普达的历险记。该片于1986年8月2日在日本上映。

红影 发表于 2022-6-8 21:52

特别喜欢的一首曲子。欣赏队长好制作{:4_187:}

马黑黑 发表于 2022-6-8 22:05

这个像童话故事一样，队长好创意

加林森 发表于 2022-6-8 22:18

红影 发表于 2022-6-8 21:52
特别喜欢的一首曲子。欣赏队长好制作

谢谢红影支持！晚上好！{:4_204:}

加林森 发表于 2022-6-8 22:19

马黑黑 发表于 2022-6-8 22:05
这个像童话故事一样，队长好创意

老黑，播放器的颜色行不？

马黑黑 发表于 2022-6-8 22:31

加林森 发表于 2022-6-8 22:19
老黑，播放器的颜色行不？

我忘了说了，这个颜色和背景搭配很得分的

加林森 发表于 2022-6-8 22:38

马黑黑 发表于 2022-6-8 22:31
我忘了说了，这个颜色和背景搭配很得分的

嗯嗯，我专门去修改了颜色的。

马黑黑 发表于 2022-6-8 22:52

加林森 发表于 2022-6-8 22:38
嗯嗯，我专门去修改了颜色的。

挺好的，队长图做得好，改代码的功力也长进很快

加林森 发表于 2022-6-8 22:56

谢谢老黑啦。在你的帮助下我必须得用心的哦。

红影 发表于 2022-6-8 23:13

加林森 发表于 2022-6-8 22:18
谢谢红影支持！晚上好！

队长注意调整按钮颜色了，真棒{:4_204:}

加林森 发表于 2022-6-8 23:17

是的。考虑到整个图片就安排播放器的颜色了。

加林森 发表于 2022-6-9 00:09

再听听就休息了。

小辣椒 发表于 2022-6-9 00:56

队长很棒，会修改按钮颜色，感觉还留了阴影{:4_199:}

小辣椒 发表于 2022-6-9 00:57

背景图图也是漂亮，队长现在好棒了{:4_178:}

加林森 发表于 2022-6-9 08:12

小辣椒 发表于 2022-6-9 00:56
队长很棒，会修改按钮颜色，感觉还留了阴影

谢谢小辣椒。是啊，我现在注意到了颜色的搭配了。

加林森 发表于 2022-6-9 08:13

小辣椒 发表于 2022-6-9 00:57
背景图图也是漂亮，队长现在好棒了

谢谢小辣椒鼓励！{:4_204:}

醉美水芙蓉 发表于 2022-6-9 22:32

加林森 发表于 2022-6-9 22:41

醉美水芙蓉 发表于 2022-6-9 22:32
队长厉害！图图做得漂亮！

谢谢水芙蓉啦。晚上好！你每天都在制作很有时间玩啊。
页: [1]
查看完整版本: 《天空之城》- 宫崎骏