烟惹寂寞酒惹愁
本帖最后由 醉美水芙蓉 于 2023-7-4 21:58 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pic.imgdb.cn/item/64a413261ddac507cc87f38c.jpg')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
li-zi {
display: block;
position: absolute;
width: 10px;
height: 10px;
background: snow;
opacity: .30;
border-radius: 50%;
z-index: 10;
}
#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: 100px; cursor: pointer; right: 880px; top: 530px; 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,Orange,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: Green;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/music283535405.mp3" autoplay="autoplay" loop="loop"></audio></div>
<script>(function() {
let total = 120, 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 = 4+ 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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
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_187:} 凄美，躺水里多凉，可别冻坏了。{:4_187:} 制作真漂亮越来越棒了 好听好看 赞！ 好久不见 问好水芙蓉！
{:4_204:}{:4_199:} 焱鑫磊 发表于 2023-7-4 22:36
不错！欣赏了！
谢谢朋友支持！ 小文 发表于 2023-7-5 10:50
凄美，躺水里多凉，可别冻坏了。
谢谢小文支持！ 大猫咪 发表于 2023-7-5 15:46
制作真漂亮越来越棒了 好听好看 赞！ 好久不见 问好水芙蓉！
问候猫咪朋友！
页:
[1]