《梦境》学习黑黑老师代码教程作业
本帖最后由 千羽 于 2022-10-25 19:47 编辑 <br /><br /><style>#papa { margin: auto; left: -216px; width: 1024px; height: 640px; top:50px; background: url('https://pic1.imgdb.cn/item/6357ae0816f2c2beb198e1de.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#papa::before { position: absolute; content: ''; background: url('https://wj.zp68.com/lxx/yunhua/2022/10/24/001.gif'); left: 600px; top: 160px; width:300px; height: 200px; border-radius: 50%; mix-blend-mode: screen; animation: rot 5s infinite; }
#tit { position: absolute; font: bold 3em sans-serif; color: #BBFFFF; top: 60px; right: 30px; text-shadow: 2px 2px 4px #000; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<span id="tit">梦<br>境</span>
<svg id="mplayer" width="360" height="60" style="position: absolute; bottom: 0;">
<rect x="50" y="25" rx="6" ry="6" width="200" height="12" stroke="hsla(280,90%,55%,.45)" fill="hsla(60,100%,100%,.65)" id="track" />
<rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="url(#bgcolor)" stroke-opacity=".45" id="prog" />
<text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="snow" id="audtime">00:00 | 00:00</text>
<circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
<animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="bgcolor">
<stop offset="0%" style="stop-color: red; stop-opacity:0.8" />
<stop offset="100%" style="stop-color: yellow; stop-opacity:0.75" />
</linearGradient>
</defs>
</svg>
</div>
<script>
(function() {
let mp = { len: track.getAttribute('width')*1, x: track.getAttribute('x')*1 }, aud = new Audio();
aud.src = 'http://music.163.com/song/media/outer/url?id=394031.mp3';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) mplayer.pauseAnimations();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - mp.x) / mp.len;
aud.addEventListener('seeked', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('width', aud.currentTime * mp.len / aud.duration < 6 ? 6 : aud.currentTime * mp.len / aud.duration+ 'px');audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let mState = () => aud.paused ? mplayer.pauseAnimations() : mplayer.unpauseAnimations();
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
})();
</script>
羽儿真漂亮的制作，恭喜羽儿代码使用成功{:4_187:} 音乐真好听，那个小动图羽儿特地取的不同宽高么，变成椭圆了倒也挺好看{:4_173:} 红影 发表于 2022-10-25 20:11
羽儿真漂亮的制作，恭喜羽儿代码使用成功
就换一图一歌而已，再复杂一点就不行了{:4_173:} 红影 发表于 2022-10-25 20:12
音乐真好听，那个小动图羽儿特地取的不同宽高么，变成椭圆了倒也挺好看
嗯，把它放宽了一点{:4_173:} 好美的梦！{:5_116:} 千羽 发表于 2022-10-25 20:14
就换一图一歌而已，再复杂一点就不行了
千羽你太聪明了。{:4_170:}
套用了黑黑的代码，小图用我的链接，这个图图我修改过尺寸的{:4_189:} 千羽 发表于 2022-10-25 20:15
嗯，把它放宽了一点
你为什么放宽呢？ 欣赏千羽的精彩制作{:4_199:} 继续套用玩，套用几次就自己会修改了 东篱闲人 发表于 2022-10-25 20:42
好美的梦！
问好东篱老师{:4_187:} 小辣椒 发表于 2022-10-25 20:53
千羽你太聪明了。
套用了黑黑的代码，小图用我的链接，这个图图我修改过尺寸的
就是把你小图的地址换过来而已……{:4_181:} 千羽 发表于 2022-10-25 21:07
就是把你小图的地址换过来而已……
我那个小图尺寸和黑黑代码不一样的，要修改一下 小辣椒 发表于 2022-10-25 20:53
你为什么放宽呢？
为了就我图右边的一片蓝色，这样更醒目一些{:4_181:} 千羽 发表于 2022-10-25 21:10
为了就我图右边的一片蓝色，这样更醒目一些
烟花效果变形了{:4_189:}不过没事，这样也是不错的 本帖最后由 千羽 于 2022-10-25 21:13 编辑
小辣椒 发表于 2022-10-25 21:08
我那个小图尺寸和黑黑代码不一样的，要修改一下
我就改了宽度和左距，顶距 千羽 发表于 2022-10-25 21:11
我就改了宽度和左距
这样可以的，也是蛮漂亮的，你的图图底色漂亮 小辣椒 发表于 2022-10-25 20:54
欣赏千羽的精彩制作
就是换个图和歌而已，别的我就不会做了{:4_181:} 小辣椒 发表于 2022-10-25 20:55
继续套用玩，套用几次就自己会修改了
嗯，{:4_181:} 千羽 发表于 2022-10-25 21:15
就是换个图和歌而已，别的我就不会做了
一步步来，几次套用后就自己学习修改了
页:
[1]
2