艾丽娅琪琪格 - 梦中的人请你留下来
本帖最后由 醉美水芙蓉 于 2023-4-30 16:16 编辑 <br /><br /><style>#papa {margin: 80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/356bcc3434afc8d3ab9d3bc35a735031.mp4.jpg') center/cover no-repeat;box-shadow: 3px 3px 20px #000;position: relative;z-index: 1;--state: paused;}.ship { position: absolute; width: 1024px; height: 640px;Left: 0px; object-fit: cover; opacity: .55; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;top: 540px;transform: translate(-50%);font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style>
<div id="papa">
<video class="ship"
src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/42c3c5aa8dd9e84eef97ad20432c01a5_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<css-doodle id="mplayer">:doodle {@grid: 3 / 160px;cursor: pointer;position: absolute;left: calc(50% - 80px);top: 410px;animation: rot 6s infinite linear var(--state);}@place-cell: center;background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0);border-radius: 0 100%;transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px);@at(1,1) {border-radius: 50%;background: radial-gradient(snow, green 60%, green 0);transform: rotate(0) translate(0);}@keyframes rot { to { transform: rotate(-1turn); } }</css-doodle>
loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music263013010.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mKey = 0, mFlag = true, script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();
</script> 用作控制的图形在视频的后面，无法点击到。 起个网名好难 发表于 2023-4-29 23:09
用作控制的图形在视频的后面，无法点击到。
谢谢老师点评！ 这个视频加的播放器点击不了了 将<video class="ship"
src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/42c3c5aa8dd9e84eef97ad20432c01a5_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
移到<css-doodle id="mplayer">代码的前面 [ 本帖最后由 亦是金 于 2023-4-30 13:58 编辑 ]\n\n<div id="papa"><video class="ship" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/42c3c5aa8dd9e84eef97ad20432c01a5_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video><css-doodle id="mplayer">:doodle { @grid: 3 / 160px; cursor: pointer; position: absolute; left: calc(50% - 80px); top: 410px; animation: rot 6s infinite linear var(--state);}@place-cell: center;background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0);border-radius: 0 100%;transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px);@at(1,1) {border-radius: 50%;background: radial-gradient(snow, green 60%, green 0);transform: rotate(0) translate(0);}@keyframes rot { to { transform: rotate(-1turn); } }</css-doodle><div id="lrc" data-lrc="HCPlayer">HCPlayer</div></div> 小辣椒 发表于 2023-4-30 13:05
这个视频加的播放器点击不了了
谢谢小辣椒点评，改好了！ 亦是金 发表于 2023-4-30 13:56
[ 本帖最后由 亦是金 于 2023-4-30 13:58 编辑 ]\n\n:doodle { @grid: 3 / 160px; cursor: p ...
谢谢老师指导！已改正过来！ 醉美水芙蓉 发表于 2023-4-30 16:18
谢谢老师指导！已改正过来！
好！{:4_187:} 醉美水芙蓉 发表于 2023-4-30 16:17
谢谢小辣椒点评，改好了！
这个视频手机看不见，电脑完美了{:4_187:} 漂亮迁入，谢谢点赞！ 梦缘 发表于 2023-4-30 20:45
漂亮迁入，谢谢点赞！
谢谢朋友支持！ 这个颜色配的真漂亮 绿叶清舟 发表于 2023-4-30 21:24
这个颜色配的真漂亮
清舟美女晚上好！ css-doodle里相应元素也可以加 z-index 马黑黑 发表于 2023-4-30 22:01
css-doodle里相应元素也可以加 z-index
谢谢黑黑老师指导！我是瞎玩的！我也许还要温习一下老师的教程的！ 醉美水芙蓉 发表于 2023-4-30 21:26
清舟美女晚上好！
芙蓉节日好 醉美水芙蓉 发表于 2023-5-1 00:11
谢谢黑黑老师指导！我是瞎玩的！我也许还要温习一下老师的教程的！
边玩边学吧
页:
[1]