穿越时空遇见你（学习黑师《物换星移几度秋》粒子效果）
本帖最后由 南无月 于 2023-7-9 11:15 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/07/04/pCsj9DP.jpg')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#mydiv {
margin: 20px auto;
width: 1024px;
height: 640px;
overflow: hidden;
position: relative;
opacity: .96;
}
li-zi {
position: absolute;
animation: rot 9s infinite linearvar(--state);
}
@keyframes rot { to { transform: rotate(3turn); } }
css-doodle { position: absolute; }
</style>
<div id="papa"><div id="mydiv"></div>
<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>
:doodle {@size: 200px 300px;right:10px;background: lightblue url('https://s1.ax1x.com/2023/07/06/pC6tCB4.jpg') no-repeat center / cover;;
position: relative;
opacity: .95;
z-index: 99;
margin: 140px auto;}
:doodle {
@grid: 126x1 / 650px;
@shape: drop;
background:
@m2(radial-gradient(#fff 50%, transparent calc(50% + 1px))
@pn(200px 478px, 192px 469px) / @pn(80px 32px, 64px 32px)no-repeat),
linear-gradient(10deg, #fff 26.5%, transparent calc(26.5% + 1px)),
linear-gradient(205deg, #5256bd 56%, #954ccc);
}
offset-path: path('M @r650 600 Q @calc(@lr + @p(@r(-300, -20), @r(20, 300), @r(±300))) @r650 @lr5 0');
position: absolute;
will-change: offset-distance;
animation: move @r(12s, 30s) infinite linear var(--state);
animation-delay: -@r(25s) ;
@keyframes move {
0% {
offset-distance: 100%
}
20%, 80% {
opacity: 1
}
100% {
offset-distance: 0 opacity: 0
}
}
:after,:before {
color: transparent;
text-shadow: 0 0 0 #fff;
}
:after {
content: @p([❉❄❅❆...❄️]);
font-size: @r(10px, 35px);
}
@nth(4-n) {
animation: none;
offset-path: none;
left: @pn(352px, 372px, 416px, 156px);
top: @pn(416px, 437px, 460px, 434px);
transform:
@pn(scaleY(4), scaleX(.75) scaleY(1.55), none, scaleY(1.5));
}
@nth(1) {
filter: blur(108px);
}
@nth(4) {
:after {
content: '☃';
font-size: 78px;
}
}
</css-doodle></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=213523" autoplay="autoplay" loop="loop"></audio><script>(function() {
let canMove = true;
class Lizi {
constructor(pa) {
this.pa = pa;
this.left = 10;
this.top = 10;
this.xstep = 0;
this.ystep = 0;
this.ele = document.createElement('li-zi');
}
creating() {
this.ele.style.cssText = `
left: ${this.left}px;
top: ${this.top}px;
`;
this.pa.appendChild(this.ele);
this.moving();
}
moving() {
if(canMove) {
this.left += this.xstep;
this.top += this.ystep;
if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
this.ele.style.left = this.left + 'px';
this.ele.style.top = this.top + 'px';
}
requestAnimationFrame(this.moving.bind(this));
}
}
//let stepAr = ;
let stepAr = ;
let txtAr = ['\u{2744}','\u{2746}','\u{2744}','\u{2744}','\u2745','\u2733'];
Array.from({length: 160}).forEach((element) => {
let xIdx = Math.floor(Math.random() * stepAr.length),
yIdx = Math.floor(Math.random() * stepAr.length),
txtIdx = Math.floor(Math.random() * txtAr.length);
element = new Lizi(mydiv);
element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
element.xstep = stepAr;
element.ystep = stepAr;
element.bg = 'none';
element.ele.innerText = txtAr;
element.creating();
element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 26) + 'px';
element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});
let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js';
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), canMove = false) : (papa.style.setProperty('--state','running'), canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
window.onload = () => {
let btn = papa.shadowRoot.querySelector('cell');
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
}
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script>
@马黑黑 老师来批改一下四（一）的使用效果 网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似是存在于两个时空里……
红衣美人儿似乎在看时空另一端的自己。。。
镜内雪无色接近真实……
镜外雪彩色如梦似幻（就是这两天玩的粒子效果了）
互相看看，你们以前可认识么？ 这个还用了两个 css-doodle，其中一个126个单元格，所以资源消耗较大。整体效果不错，不过将来做帖应权衡帖子使用元素 的数量问题，粒子 和 css-doodle 单元格都是元素。 南无月 发表于 2023-7-9 09:16
网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似 ...
思路很不错 南无月 发表于 2023-7-9 09:09
@马黑黑 老师来批改一下四（一）的使用效果
10000√ 马黑黑 发表于 2023-7-9 09:18
这个还用了两个 css-doodle，其中一个126个单元格，所以资源消耗较大。整体效果不错，不过将来做帖应权衡帖 ...
这个126也是雪花。。
明白了，以后要根据实际情况适当增删。。 马黑黑 发表于 2023-7-9 09:19
思路很不错
太好了，这个有点故事感 南无月 发表于 2023-7-9 10:59
太好了，这个有点故事感
大型叙事帖 马黑黑 发表于 2023-7-9 09:20
10000√
一百又一百，这个壮观 南无月 发表于 2023-7-9 10:59
一百又一百，这个壮观
{:4_172:} 马黑黑 发表于 2023-7-9 10:59
大型叙事帖
{:4_173:}每片雪花都是一句话的话有286句 马黑黑 发表于 2023-7-9 11:00
{:4_208:} 南无月 发表于 2023-7-9 11:20
每片雪花都是一句话的话有286句
话唠了 马黑黑 发表于 2023-7-9 11:36
话唠了
吵得很{:4_170:} 南无月 发表于 2023-7-9 11:39
吵得很
俺喜欢安静 马黑黑 发表于 2023-7-9 11:40
俺喜欢安静
安静的抽着烟写代码{:4_170:} 南无月 发表于 2023-7-9 11:46
安静的抽着烟写代码
还有读书 月儿这个帖子的含金量高，不但有粒子效果，更有奇特的css-doodle效果，结合在一起，特别精彩{:4_199:} 南无月 发表于 2023-7-9 09:16
网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似 ...
这个裁切水滴形状还是第一次看到呢，特别奇特{:4_187:}