《烟酒入魂情伤人》黄静美
本帖最后由 焱鑫磊 于 2023-7-8 08:08 编辑 <br /><br /> <style>#papa {
margin: 110px -280px;
width: 1164px;
height: 640px;
background: url('https://pic.imgdb.cn/item/64a8a8f91ddac507ccd8f2f7.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: 1030px; top: 510px; 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: 30px;--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.joy127.com/url/105872.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(), 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_199:} 好制作！歌美图靓！ 好听好看！欣赏焱鑫磊好帖！
{:4_204:}{:4_199:}
问好焱鑫磊，其实这个粒子的背景图你还是简单的那种图比较好，现在粒子效果不够明显了。和花花混色了 谢谢焱鑫磊的精彩制作{:4_171:} 小辣椒 发表于 2023-7-7 23:39
问好焱鑫磊，其实这个粒子的背景图你还是简单的那种图比较好，现在粒子效果不够明显了。和花花混色了
是的，谢谢小辣椒！{:4_187:} 小辣椒 发表于 2023-7-7 23:40
谢谢焱鑫磊的精彩制作
问好小辣椒！{:4_204:}
页:
[1]