你在爱情里下了毒
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pic.imgdb.cn/item/646cccd00d2dde5777fe2e51.jpg')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
li-zi {
position: absolute;
border-radius: 100% 100% 100% 0;
background: lightblue;
box-shadow: inset -2px -2px 10px 0 antiquewhite;
opacity: .9;
cursor: pointer;
transform: rotate(-45deg);
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .10;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }</style><div id="papa"><!-- 播放器 --><css-doodle grid="1" id="mplayer">
:doodle { @size: 60px; cursor: pointer; left: 30px; bottom: 30px; opacity: .96;z-index: 4; }
clip-path: @shape(
fill: evenodd;
points: 300;
scale: .45;
x: cos(2t) + cos(7t);
y: sin(2t) + sin(7t);
);
background: linear-gradient(DeepSkyBlue,LightSkyBlue,MediumPurple);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<!-- 歌词 --><css-doodle id="lrc">:doodle { @size: auto 4em; z-index:5; bottom: 10px;--geci: " css-doodle player"; --motion: cover2; --tt: 1s; }display: grid;place-items: center start;:before, :after {content: var(--geci);color: Honeydew;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color: Sienna;overflow: hidden;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%; } }</css-doodle><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/36/5d208d001e9c2.mp4" autoplay="" loop="" muted=""></video> <audio id="aud" src="https://www.qqmc.com/mp3/music286315083.mp3" autoplay="autoplay" loop="loop"></audio></div><script>(function() {
let total = 100, canMove = true, lzAr = [];
let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('li-zi');
let ww = 5 + Math.round(Math.random() * 40),
lPos = Math.round(Math.random() * (papa.offsetWidth - ww)),
tPos = Math.round(Math.random() * (papa.offsetHeight - ww));
item.style.cssText += `
left: ${lPos}px;
top: ${tPos}px;
width: ${ww}px;
height: ${ww}px;
background: #${Math.random().toString(16).substr(-6)};
`;
let ar = ;
lzAr.push(ar);
papa.appendChild(item);
});
let move = () => {
if(canMove) {
lzAr.forEach((item,key) => {
item += mlAr;
item += mtAr;
if(item > papa.offsetWidth) item = 0;
if(item < -item / 2) item = papa.offsetWidth;
if(item > papa.offsetHeight) item = 0;
if(item < -item / 2) item = papa.offsetHeight;
item.style.left = item + 'px';
item.style.top = item + 'px';
});
}
requestAnimationFrame(move);
};
move();
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause(), canMove = false) : (papa.style.setProperty('--state','running'), vid.play(), canMove = true);
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script> 问好水芙蓉，刚看见黑黑这个教程分享，你就出来了{:4_178:} 这个歌词同步是水芙蓉加的吧{:4_199:}@最美水芙蓉 小辣椒 发表于 2023-7-12 21:49
问好水芙蓉，刚看见黑黑这个教程分享，你就出来了
问候小辣椒！谢谢欣赏支持！ 这个十分漂亮，气球调得飞得慢了许多。。还加了同步歌词，点赞{:4_187:} 南无月 发表于 2023-7-12 22:22
这个十分漂亮，气球调得飞得慢了许多。。还加了同步歌词，点赞
问候月儿！谢谢光临支持！ {:4_199:} 马黑黑 发表于 2023-7-12 22:51
黑黑老师晚上好！ 醉美水芙蓉 发表于 2023-7-12 23:17
黑黑老师晚上好！
{:4_190:} 创造性应用黑科技，意境非常贴合音乐的效果！ 这些气球无论是飞去还是原地飘动，都很美的，背景很美，还加了视频效果，更美了。欣赏水芙蓉好帖{:4_199:} 樵歌 发表于 2023-7-13 07:26
创造性应用黑科技，意境非常贴合音乐的效果！
谢谢樵歌精彩点评！ 红影 发表于 2023-7-13 10:38
这些气球无论是飞去还是原地飘动，都很美的，背景很美，还加了视频效果，更美了。欣赏水芙蓉好帖
谢谢红影美女光临支持！ 芙蓉的图好美，创意无限啊，棒棒哒{:4_187:} 千羽 发表于 2023-7-13 20:05
芙蓉的图好美，创意无限啊，棒棒哒
哪能跟千羽的图图比，问候千羽晚上好！ 醉美水芙蓉 发表于 2023-7-13 20:12
哪能跟千羽的图图比，问候千羽晚上好！
芙蓉的图挺漂亮，我是一点也不会做{:4_181:} 醉美水芙蓉 发表于 2023-7-13 11:56
谢谢红影美女光临支持！
问好水芙蓉美女，客气了{:4_187:}
页:
[1]