本帖最后由 加林森 于 2022-4-4 16:54 编辑 <br /><br />红影 发表于 2021-10-28 21:06
很有规律的生活。
习惯成自然了啊
<style>
.oml { position: relative; left: -340px; width: 1280px; height: 720px; background: olive url('https://pic.imgdb.cn/item/624a889f239250f7c5da4c0b.jpg') no-repeat center/cover; font: 1em / 30px Sans-serif; color: #aaa; text-shadow: 1px 1px 1px #666; opacity: .85;}
.oml::before { content:''; position: absolute; width: 100%; height: 365px; background: url('/data/attachment/forum/202204/03/154038ppjf8hsz7h4fjfms.gif') repeat-x; }
.oml::after { content: attr(data-t); position: absolute; width: 250px; left: 160px; bottom: 15px; animation: fly 20s linear infinite alternate; }
.btn { position: absolute; width: 120px; height: 30px; left: 10px; bottom: 15px; text-align: center;background: #666; border-radius: 8px; cursor: pointer; opacity: .8; animation: color 1s ease infinite; }
@keyframes fly { to { left: 1000px; } }
@keyframes color { to { color: gold; } }
</style>
<div class="oml" data-t="天涯灯火--乌兰图雅送祝福给小辣椒！">
<div class="btn">Play&Pause</div>
</div>
<script>
let canplay = true;
let btn = document.querySelector('.btn');
let oml = document.querySelector('.oml');
let aud = document.createElement('audio');
aud.src = "https://www.joy127.com/url/6181.mp3";
aud.loop = true;
document.querySelector('.oml').appendChild(aud);
btn.onclick = function() {
canplay ? (aud.play(), this.style.animationPlayState='paused', canplay = false) : (aud.pause(), this.style.animationPlayState = 'running', canplay = true);
}
</script>
加林森 发表于 2021-10-28 21:13
习惯成自然了啊
很不错的习惯{:4_204:}
红影 发表于 2021-10-28 21:35
很不错的习惯
嗯嗯