爱在记忆中找你 贺：花潮女同胞们女神节快乐！
<style>#papa { margin: 150px 0 0 calc(50% - 781px); display: grid; place-items: center; width: 1400px; height: 782px; background: lightblue; box-shadow: 3px 3px 20px #fff; 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/65e743499f345e8d0354ecd3.jpg') no-repeat center/cover; }
#papa:hover::before { transform: scale(1.2); }
#papa:fullscreen::before { transform: unset; } #lrc { position: absolute; top: 100px;left: 200px;font: bold 2.2em sans-serif; color: DarkGray; text-shadow: 1px 1px 1px rgba(0,0,0,.15); --ani: lrcGo1; --duration: 1s; } #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: rgba(128,0,0,.52); background: linear-gradient(to bottom, rgba(128,0,0,.75), rgba(128,50,0.55)); 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: 32%; bottom: 50px; text-align: center; color: Chocolate; }
#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: 18%; bottom: 50px; 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 src="http://music.163.com/song/media/outer/url?id=113373.mp3"></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241.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 = [['0.00', ' 爱在记忆中找你',0.95],
['1.00', ' 歌手：林峯',0.95],
['2.00', ' 编曲 : Johnny Yim',0.95],
['3.00', ' 祝花潮论坛的女同胞们女神节快乐！',12.98],
['16.66', '我对你 这一生 哪个可比',6.36],
['23.36', '我与你 差一些 永远一起',6.56],
['30.27', '邂逅时间场地 似连场好戏',6.85],
['37.48', '要自何页说起 Wow Ho',5.31],
['43.07', '爱太重 深呼吸 欠缺空气',7.10],
['50.54', '爱太美 轻轻的 却载不起',6.41],
['57.29', '爱情来到时候 似明媚天气',7.01],
['64.67', '它走了 突然骤变雪落雨飞',5.44],
['70.40', '如果可以恨你 全力痛恨你',4.34],
['74.97', '连遇上亦要躲避',2.61],
['77.72', '无非想放下你 还是挂念你',3.62],
['81.53', '谁又会及我伤悲',3.04],
['84.73', '前事最怕有人提起 就算怎么伸尽手臂',6.80],
['91.89', '我们亦有一些距离',4.01],
['126.64', '你太远 该怎么 说对不起',6.47],
['133.45', '你太近 一转身 却已高飞',6.17],
['139.95', '快乐也许太短 似场流星雨',6.72],
['147.02', '一眨眼 就如幻觉怕又记起',5.45],
['152.76', '如果可以恨你 全力痛恨你',4.14],
['157.12', '连遇上亦要躲避',2.76],
['160.02', '无非想放下你 还是挂念你',3.82],
['164.04', '谁又会及我伤悲',2.94],
['167.13', '前事最怕有人提起 就算怎么伸尽手臂',6.72],
['174.20', '我们亦有一些距离',3.59],
['194.82', '如果可以恨你 全力痛恨你',3.29],
['198.28', '连遇上亦要躲避',2.84],
['201.27', '无非要放下你 还是挂念你',3.57],
['205.03', '谁又会及我伤悲',2.85],
['208.03', '前事最怕有人提起 就算怎么伸尽手臂',6.90],
['215.29', '我们亦有一些距离',6.66],
['222.30', '我情愿我狠心憎你 我还在记忆中找你',4.5]
];
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>
<br><br><br>
@小辣椒
作业完成，看看有没有错误{:4_170:} @马黑黑
马老师我都没有看过你的源码效果，现在去看看，做的不好也是情有可原，冬雨不是好学生{:4_170:} 花潮的女同胞们 女神节快乐！ {:4_199:} 这个还会鼠标接触变化的呢，很漂亮的制作。欣赏冬小雨好帖，借帖祝所有的姐妹们节日快乐{:4_199:} 鸟语歌，好听{:4_187:} 欣赏老师佳作 借美帖祝美女们节日快乐 冬雨速度的，这个帖代码才发你你已经完成了{:4_199:} 不错的，这个歌词颜色换了，小辣椒开始不明白怎么歌词换的总不是自己想的，冬雨会了{:4_199:} 冬天的雨 发表于 2024-3-6 20:43
@小辣椒
作业完成，看看有没有错误
反正比我前面的做的效果好 一起祝福论坛的姐妹们三八节快乐！ 冬雨的图做得挺好的嘛，播放器也选的精致小巧，点赞哈{:4_187:} 和花潮女同胞们一起快乐过节{:4_181:} 漂亮的制作，借贴也祝大家节日快乐 马黑黑 发表于 2024-3-6 20:46
{:4_180:}
喝茶 冬天的雨 发表于 2024-3-8 17:16
喝茶
下午好 红影 发表于 2024-3-6 22:00
这个还会鼠标接触变化的呢，很漂亮的制作。欣赏冬小雨好帖，借帖祝所有的姐妹们节日快乐
美女节日快乐！{:4_187:} 流水光阴 发表于 2024-3-7 11:37
鸟语歌，好听
冬雨就喜欢鸟语{:4_170:}
页:
[1]
2