本帖最后由 南无月 于 2023-7-2 17:36 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
background: url('') no-repeat center/cover;
box-shadow: 0 0 6px #000;
overflow: hidden;
position: relative;
z-index: 1;
--state: paused;
}
#mydiv::before {
position: absolute;
content: '\1F40B';
left: 81%;
bottom: 2%;
transform: rotate(10deg);
font: bold 80px/80px sans-serif;
cursor: pointer;
opacity: .9;
z-index: 10;
pointer-events: auto;
animation: rot 1s infinite alternate linear var(--state);
}
@keyframes rot { to { transform: rotate(30deg); } }
#wutai {
position: absolute;
width: 100%;
top:300px;
height: 247px;
z-index: 6;
overflow: hidden;
position: relative;
}
.wugui {
margin: 30px 0;
position: absolute;
left: 0px;
width: 178px;
height: 187px;
background: url('https://pic.imgdb.cn/item/64a0d24e1ddac507cc24e861.png') no-repeat;
animation: crawl 2s steps(6) var(--delay) infinite, move 16s var(--delay) infinite linearvar(--state);
--delay: -8.5s;
}
.wugui:nth-of-type(2) {
transform: scale(.5);
--delay: -5.4s;
}
.wugui:nth-of-type(3) {
transform: scale(.8);
--delay: -0.1s;
}
li-zi {
display: block;
position: absolute;
right: 20px;
bottom: 60px;
width: 20px;
height: 20px;
background: snow;
border-radius: 50%;
z-index: 11;
animation: move1 10s var(--delay) infinite alternate var(--state);
--deg: -5deg; --xx: -600px; --delay: 0;
}
@keyframes move1 {
from { transform: rotate(0deg) translateY(0px); opacity: 1; }
to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
@keyframes crawl {
0% { background-position:0px 0px; }
100% { background-position:0px -1122px; }
}
@keyframes move {
to { left: 720px; }
}
@keyframes rot { to { transform: rotate(30deg); } }
#vid {
position: absolute;
width: 1300px;
height: 100%;
top:0px;
left:-100px;
border-radius: 2%;
opacity: .95;
object-fit: cover;
pointer-events: none;
}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;top: 20px;transform: translate(-50%);font: bold 2em 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));z-index: 12;}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: CornflowerBlue;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="mydiv">
<div id="wutai">
<div class="wugui"></div>
<div class="wugui"></div>
<div class="wugui"></div>
</div>
<div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/35/5b571aaad0ff7.mp4" autoplay="" loop="" muted=""></video>
<div class="tortoise"></div></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1312898651" autoplay="autoplay" loop="loop"></audio><script>(function (){
let mKey = 0, mFlag = true, slip = 0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let total = 120;
let createLizi = (mum,sons) => {
Array.from({length: sons}).forEach( (s,k) => {
let xx = 6 + Math.ceil(Math.random() * 10);
s = document.createElement('li-zi');
s.style.cssText += `
width: ${xx}px;
height: ${xx}px;
left: calc(84% - ${xx / 2}px);
--deg: ${30 - Math.ceil(Math.random() * 245)}deg;
--xx: -${600 + Math.ceil(Math.random() * 1200)}px;
--delay: -${Math.random() * 60}s;
`;
mum.appendChild(s);
});
};
createLizi(mydiv,total);
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
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');mydiv.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-6-16 20:07
这是真的，看跑男我把他和白鹿都当女生来看
我不喜欢这类的
南无月 发表于 2023-6-16 12:46
千羽啊，这个背景灰蒙蒙，应该能调亮点有质感的，我试了下没成。。。。
你用了PS调吗？
南无月 发表于 2023-6-16 12:47
抱个，看到你最开心了
和月儿一起开心：{:4_179:}
这个制作太漂亮了，图图也美{:4_199:}
马黑黑 发表于 2023-6-16 20:41
我不喜欢这类的
这类型的你肯定不喜欢。。闭眼，歌可以一听的。。
千羽 发表于 2023-6-16 21:00
你用了PS调吗？
对的，试了效果不咋滴就还这样用了。{:4_173:}
千羽 发表于 2023-6-16 21:01
和月儿一起开心：
{:4_191:}嗯哪周末快乐
绿叶清舟 发表于 2023-6-16 21:10
这个制作太漂亮了，图图也美
这几个转动的圈圈效果出来后也觉得挺不错，图图网络里的，鲸鱼朝向比较合适就拿来用用{:4_204:}
醉美水芙蓉 发表于 2023-6-16 21:15
月儿最聪明，学得好，做得快！
路径作业拖好久，不算快了{:4_187:}晚上好啊
南无月 发表于 2023-6-16 21:32
对的，试了效果不咋滴就还这样用了。
月儿，你在PS上点击：图像—调整—亮度对比度就可以调了，这是最直接的调法{:4_173:}
醉美水芙蓉 发表于 2023-6-16 21:43
这个播放器图形没有见过，月儿怎么做出来的？真厉害，越看越美！
第一排第七个，数据乱改剪出来的{:4_173:}
千羽 发表于 2023-6-16 21:36
月儿，你在PS上点击：图像—调整—亮度对比度就可以调了，这是最直接的调法
{:4_173:}好哒，我去试试哈。。。
南无月 发表于 2023-6-16 21:31
这类型的你肯定不喜欢。。闭眼，歌可以一听的。。
听着听着人皮起鸡皮疙瘩
本帖最后由 南无月 于 2023-6-17 18:27 编辑
马黑黑 发表于 2023-6-16 22:08
听着听着人皮起鸡皮疙瘩
其实男生女相者有大富贵，没那么不可接受的。。。{:4_173:}
本帖最后由 马黑黑 于 2023-6-17 21:18 编辑
南无月 发表于 2023-6-17 10:12
其实……，没那么不可接受的。。。
这个不清楚
南无月 发表于 2023-6-16 12:50
贴子有点满，小播只能挂月亮上了
这个思路很赞的{:4_199:}
南无月 发表于 2023-6-16 12:48
如果有看点，还是个坛子学习氛围好，感谢影子
是月儿小脑袋瓜灵呢，这个帖子做得太棒了{:4_199:}