《大浪淘沙(琵琶与管弦乐队)》- 张强
本帖最后由 加林森 于 2022-6-4 19:47 编辑 <br /><br /><style>.outer { left: -302px; width: 1200px; height: 673px; top: 150px; background: url('https://pic.imgdb.cn/item/629b00cc094754312906dac9.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; left: 820px;top: 80px;bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute;left: 830px; bottom: 110px; width: 80px; height: 10px; top: 35px; 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=60602.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>
<div style="position:absolute; width:500px; left:950px; top: 1420px; text-align:center;">
<style>
.txtBg {
font-size: 2.5rem;
color: transparent;
width: 500px;
height: 380px;
line-height: 380px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 380px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }
}
</style>
<div class="txtBg">帖赠：小辣椒
</script> </div></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
@马黑黑 @小辣椒 气势磅礴的大图排山倒海、气壮山河啊！
{:4_199:} 梦油 发表于 2022-6-4 15:07
气势磅礴的大图排山倒海、气壮山河啊！
是的。 厉害 加林森 发表于 2022-6-4 15:12
是的。
你真有两下子。 队长自己可以修改一下云的位置和大小{:4_173:} 或者按钮位置 马黑黑 发表于 2022-6-4 15:13
厉害
一般一般 梦油 发表于 2022-6-4 15:16
你真有两下子。
{:4_189:} 小辣椒 发表于 2022-6-4 16:00
队长自己可以修改一下云的位置和大小
这个有点困难了。正在烧脑中。。。。 小辣椒 发表于 2022-6-4 16:01
或者按钮位置
我会努力的。 加林森 发表于 2022-6-4 17:06
一般一般
不简单 马黑黑 发表于 2022-6-4 17:25
不简单
我在想怎么把播放器移动到山顶上去呢。有点烧脑。。。。 加林森 发表于 2022-6-4 17:35
我在想怎么把播放器移动到山顶上去呢。有点烧脑。。。。
这个要移走两样东西：
.outer meter { 。。。 }
.btn {。。。}
这两样的 left 和 bottom（或top）同步加上相同的px值 马黑黑 发表于 2022-6-4 18:15
这个要移走两样东西：
.outer meter { 。。。 }
哦，我现在终于把播放器移到上面去了。 小辣椒 发表于 2022-6-4 16:01
或者按钮位置
现在我终于把按钮放上去了。云怎么放上去我还得已经了。 加林森 发表于 2022-6-4 18:17
哦，我现在终于把播放器移到上面去了。
得要领了就能操作一切 马黑黑 发表于 2022-6-4 19:08
得要领了就能操作一切
嗯嗯，谢谢哈。 加林森 发表于 2022-6-4 18:37
现在我终于把按钮放上去了。云怎么放上去我还得已经了。
队长，你加黑黑的云飘 我这个要加大尺寸调整
页:
[1]
2