光芒再现
本帖最后由 马黑黑 于 2022-4-5 15:13 编辑 <br /><br /><style>.oml { position: relative; left: -340px; width: 1280px; height: 720px; background: olive url('/data/attachment/forum/202204/03/154038rpwvwvzvvdrvx2bp.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="Linkin Park - One More Light">
<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 = "http://www.kumeiwp.com/sub/filestores/2022/04/01/95fb7004c671504ff255dd3196d0861d.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>
这个不自动播放，做法符合当下浏览器大咖们的基于audio的标准。就是说，音频、视频的播放，权限是访客。不知道这样的标准好不好，很复杂的问题。
帖子用到两张图片，一张是背景图，一张是gif飞虫图。CSS动画两个，一个是按钮变前景色，起提示作用，一个是文本仿marquee飞行。音乐用JS加载，宿主是父框。全部代码如下：
<style>
.oml { position: relative; left: -340px; width: 1280px; height: 720px; background: olive url('/data/attachment/forum/202204/03/154038rpwvwvzvvdrvx2bp.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="Linkin Park - One More Light">
<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://music.163.com/song/media/outer/url?id=1330980201.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>
两张图片都极为苗条，背景图77k，GIF图50K不到。本人图盲，只会压缩图片 怎么听不见音乐呢？ 现在有声音了，有点慢。 width: 100%; height: 365px; 就让动图只在上半部平铺了，真不错。
黑黑很漂亮的制作，点赞{:4_187:} 红影 发表于 2022-4-3 18:53
width: 100%; height: 365px; 就让动图只在上半部平铺了，真不错。
黑黑很漂亮的制作，点赞
这个音乐想不想西版阿杜 加林森 发表于 2022-4-3 18:23
现在有声音了，有点慢。
用的是网页的音乐，音质相对好 马黑黑 发表于 2022-4-3 20:24
用的是网页的音乐，音质相对好
哦，我用的是酷美网盘里的音乐。 加林森 发表于 2022-4-3 20:30
哦，我用的是酷美网盘里的音乐。
酷美网盘的快一点 马黑黑 发表于 2022-4-3 20:38
酷美网盘的快一点
昨天他们网盘出问题了，今天聚合网盘也出问题，不过现在都好了。 加林森 发表于 2022-4-3 20:42
昨天他们网盘出问题了，今天聚合网盘也出问题，不过现在都好了。
近段时间不太正常 马黑黑 发表于 2022-4-3 21:18
近段时间不太正常
就是，可能是上传的人太多了吧。 加林森 发表于 2022-4-3 21:21
就是，可能是上传的人太多了吧。
是的 马黑黑 发表于 2022-4-3 21:45
是的
昨晚吓我一跳，怎么我的图片都没有了呢。 加林森 发表于 2022-4-3 21:58
昨晚吓我一跳，怎么我的图片都没有了呢。
时间长了会酱紫的 马黑黑 发表于 2022-4-3 22:15
时间长了会酱紫的
我没有自己的空间，可能就这样的吧。 加林森 发表于 2022-4-3 22:49
我没有自己的空间，可能就这样的吧。
托管的感觉 马黑黑 发表于 2022-4-4 08:27
托管的感觉
嗯嗯 加林森 发表于 2022-4-4 13:20
嗯嗯
俺们想要自己的空间不容易
页:
[1]
2