丁香花 TO：小辣椒 （学习马老师【空心】效果）
<style>
#papa { margin: 120px 0 0 calc(50% - 721px); width: 1280px; height: 684px; background: url('https://pic.imgdb.cn/item/65d09d809f345e8d033bf3c9.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#lrc { position: absolute; left: 100px; top: 40px; font: bold 2.0em sans-serif; color: lightgreen; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(lightgreen, SeaGreen, lightgreen 24px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 4px ridge lightgreen; }
#btnplay { position: absolute; left: 920px;bottom: 40px; width: 200px; height: 200px; animation: rotating 6s linear infinite var(--state); cursor: pointer; }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 0 100%; background: repeating-radial-gradient(green, white, green 10%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
#vid {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
pointer-events: none;
opacity: .15;
}
@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); } }
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1933965134 " autoplay loop></audio>
<video id="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/wsm2.mp4" autoplay loop muted oncontextmenu="return false"></video>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
<div id="btnplay"></div>
</div>
<script>
var geci = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
Array.from({length: all = 9}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
btnplay.prepend(item);
});
</script>
<br><br> @小辣椒
任务完成
开始冬雨真不想做这首丁香花的，大过年的，这么伤感的歌曲不合适{:4_203:}
但小辣椒喜欢冬雨就做了，反正歌曲就听听的，不去多想就好{:4_179:}
@马黑黑
马老师好~下午小辣椒发的源码，冬雨学习做一次，现在去看看老师的大作{:4_187:} 懂得修改一些地方，赞 马黑黑 发表于 2024-2-17 20:54
懂得修改一些地方，赞
谢谢老师表扬，冬雨是真的一直在退步，没有好好学习了{:4_170:} 快手，速度，学霸！ 小辣椒就特别喜欢的调儿。樵哥哥帮听一会开心一会。{:4_195:} 漂亮，冬小雨聪明，这个制作真好。小辣椒亲爱的收礼开心{:4_187:} 冬天的雨 发表于 2024-2-17 20:57
谢谢老师表扬，冬雨是真的一直在退步，没有好好学习了
环境不同，爱好不同，追求不同，所以，发力不一样 我就知道欣赏。 冬天的雨 发表于 2024-2-17 20:51
@小辣椒
任务完成
来了，谢谢冬雨，这么忙还是完成了作业{:4_199:} 欣赏冬雨的精彩制作，这个颜色和歌词很相符，很喜欢的{:4_199:} 特别喜欢这首丁香花，非常好听，而且有很感人的故事 伤感歌曲容易打动人心 樵歌 发表于 2024-2-17 21:26
快手，速度，学霸！
老首长晚上好，谢谢鼓励{:4_187:} 樵歌 发表于 2024-2-17 21:29
小辣椒就特别喜欢的调儿。樵哥哥帮听一会开心一会。
老首长特别厚爱小辣椒{:4_170:} 红影 发表于 2024-2-17 22:12
漂亮，冬小雨聪明，这个制作真好。小辣椒亲爱的收礼开心
美女晚上好，冬雨笨蛋一个{:4_170:} 马黑黑 发表于 2024-2-17 22:31
环境不同，爱好不同，追求不同，所以，发力不一样
现在都发不了力了，拖拉机了 庶民 发表于 2024-2-18 11:33
我就知道欣赏。
谢谢欣赏{:4_180:}喝茶