致 你（马黑黑原创）
本帖最后由 朵拉 于 2024-3-4 23:19 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue; box-shadow: 3px 3px 20px #000; overflow: hidden; transition: background-size .75s; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; inset: 0; transition: .75s; background: url('https://pic.imgdb.cn/item/65e5e23f9f345e8d032614d6.jpg') no-repeat center/cover; }
#papa:hover::before { transform: scale(1.2); }
#papa:fullscreen::before { transform: unset; }
#lrc { position: absolute; top: 20px; font: bold 2.4em sans-serif; color: white; text-shadow: 1px 1px 1px rgba(0,0,0,.75); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: rgba(0,100,100,.2); background: linear-gradient(to bottom, rgba(10,200,10,.35), rgba(0,100,200,.8)); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); }
#mplayer { position: absolute; left: 52%; bottom: 10px; text-align: center; color: lightblue; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 280px; accent-color: snow; outline: none; cursor: pointer; }
#mprog:focus { accent-color: lightblue; }
#btnplay { width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
#btnplay:hover { filter: invert(.2); }
#btnFs { position: absolute; left: 38%; bottom: 10px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 100; }
#papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1862592546" loop autoplay></audio>
<video src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bde6a1eca.mp4" muted loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div id="btnFs">全屏观赏</div>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>
<script>
var geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc_fs.js';
document.querySelector('body').appendChild(sF);
</script> @马黑黑
老师 晚上好，学生交作业，
请教 同步歌词的颜色代码 没有找到{:4_190:} 音乐链接无效 歌词颜色在 #lrc 和 #lrc::before 两个选择器里 一楼音乐地址为：
‘http://wp.lsjwldx.com/myfile/%E6%9C%B5%E6%8B%89/gushi.mp3’
论坛要求的媒体资源URI，需要 https 协议 马黑黑 发表于 2024-3-4 21:42
一楼音乐地址为：
‘http://wp.lsjwldx.com/myfile/%E6%9C%B5%E6%8B%89/gushi.mp3’
老师好，学生已重新修改，请您再次指正{:4_190:} 朵拉 发表于 2024-3-4 23:20
老师好，学生已重新修改，请您再次指正
现在听到了 漂亮，欣赏朵宝好帖{:4_204:} 这位小朋友真把月亮摘下来啦。{:5_106:} 朵儿作业优秀！有创意，特别那个小女娃推月亮{:4_189:} 朵拉很用功的，每个作业都是速度的完成，还是手机操作，辛苦的{:4_179:}
页:
[1]