清明节
<br><br><style>
#papa { left: 14px; width: 650px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/642d0416a682492fccc66939.jpg') no-repeat center/cover; box-shadow: 1px 1px 1px #679e89; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; width: 50px; height: 50px; left: 460px; top: 670px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 85px; font: bold 2.0em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(120,70%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
.cd { position: absolute; width: 550px; height: 700px; object-fit: cover; opacity: .5; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa">
<video class="cd" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="HCplayer">HCplayer</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/ea9f-audiofreehighqps/F5/A5/GKwRIRwIAsXQAEaQ6wILIcyj.m4a" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.loop = false;
mplayer.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>
今天清明节，休息一天 睡了个懒觉，幸福的不要不要的{:4_173:} 看见朋友发我的照片，大家庭清明团聚，场景大的不得了，简直让我惊叹不已 清明节有这么隆重啊，难怪要放假一天，起来就去搜索了一下清明的小知识，做个图纪念一下 欣赏老师的 精彩分享，问 好！{:4_204:} 清明时节。 做得真好，清明的天空和气氛就是如此！小辣椒就是棒！{:4_187:} 还盖上大红小辣椒之印，简直完美无瑕了。 let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
每句文字前后的数字是什么意思呀？比如说我已后想把自己写的诗词换个图和音乐，该怎么弄哇{:4_203:}
小辣椒 发表于 2023-4-5 14:08
看见朋友发我的照片，大家庭清明团聚，场景大的不得了，简直让我惊叹不已
看见朋友发我的照片，
~~这句樵哥哥差点以为把小辣椒的玉照发微信了呢，{:4_173:}貌似少了个字 这牧童这细雨，再现了杜牧诗句的场景，亲爱的这个制作真棒{:4_199:} 这个贴子小巧 应景，看起来舒服之极{:4_187:} 老师制作的非常棒{:4_190:} 很应景的制作{:4_199:}{:4_187:} 红影 发表于 2023-4-5 19:01
这牧童这细雨，再现了杜牧诗句的场景，亲爱的这个制作真棒
清明时节雨
纷纷路上行人
欲断魂，
借问酒家何处
有牧童
遥指杏花村 好雅致的图片 小辣椒的图片和音乐配的挺好，有清明节的韵味{:4_187:} 小巧精致的播放器掌控着同步歌词，挺好看的{:4_187:} 四海八荒 发表于 2023-4-5 20:18
清明时节雨
纷纷路上行人
欲断魂，
这个是改编成词么？ 梦缘 发表于 2023-4-5 16:15
欣赏老师的 精彩分享，问 好！
问好梦缘，谢谢欣赏~~