加林森 发表于 2022-6-3 22:28

《美丽的草原我的家》- 乌兰托娅（根据老黑教程制作）


<style>

.outer { left: -302px; width: 1200px; height: 642px; background: url('https://pic.imgdb.cn/item/629a197309475431290f8491.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('/data/attachment/forum/202206/03/202728j87yxyk38w3cwc3g.png'); animation: cloud_fly 40s linear infinite; }
.outer meter { position: absolute; width: 100px; left: 50px; bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 60px; bottom: 110px; width: 80px; height: 10px; background: green; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left: calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px; background: darkgreen; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
        <div class="sky"></div>
        <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
        <div class="btn"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=301159.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');

aud.addEventListener('timeupdate', () => {
        meter.value = aud.currentTime / aud.duration * 100;
});

btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');

</script>

加林森 发表于 2022-6-3 22:28

本帖最后由 加林森 于 2022-6-4 08:00 编辑

@马黑黑
《美丽的草原我的家》- 乌兰托娅

美丽的草原..我.的.家...
风吹绿草遍..地..花..
高.压.电线..云中走...
清清的河流映..晚霞..
骏马好..似.彩.云.朵..
牛羊好.似.珍..珠..撒...
啊 啊.哈 嗨..牧羊姑..娘放..声.唱...
愉快的..歌..声满天涯....
牧羊姑..娘放.声唱...
愉快的.歌.声.满.天.涯.....
美丽的草原.我的家...
水青草美我爱她...
草原就.象.绿色的海.....
毡房就像白.莲花....
牧民描绘.幸.福.景..
春光万里.美如.画....
啊 ....牧.羊姑.娘放.声.唱...
愉快的歌.声满.天涯....
牧羊姑..娘放.声唱....
愉快的歌.声.满..天..涯.....




马黑黑 发表于 2022-6-3 22:34

这云很舒展

加林森 发表于 2022-6-3 22:36

马黑黑 发表于 2022-6-3 22:34
这云很舒展

是的，挺好看的。

红影 发表于 2022-6-4 08:56

这个帖子和黑黑的帖子没什么太大的变化{:4_173:}

加林森 发表于 2022-6-4 09:28

红影 发表于 2022-6-4 08:56
这个帖子和黑黑的帖子没什么太大的变化

云朵有点变化的。{:4_189:}
页: [1]
查看完整版本: 《美丽的草原我的家》- 乌兰托娅（根据老黑教程制作）