World IN Dream

马黑黑 发表于 2024-7-30 17:54

马黑黑 发表于 2024-7-30 17:55

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/2/fj01.jpg') no-repeat center/cover;
box-shadow: 2px 3px 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
pointer-events: none;
position: relative;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after {
left: calc(50% - 60px);
top: 20px;
width: 120px;
height: 120px;
background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover;
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
bottom: 120px;
content: url('https://638183.freep.cn/638183/small/boat.gif');
-webkit-mask: radial-gradient(circle, red,transparent);
opacity: .9;
}
li-zi {
position: absolute;
left: calc(50% - 5px);
bottom: 0;
width: 10px;
height: 10px;
border-radius: 0 60%;
box-shadow: inset 0 0 10px yellow;
animation: fly 6s linear infinite var(--state);
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=449924047" autoplay loop></audio>
</div>

<script>
Array.from({length: 100}).forEach(lz => {
lz = document.createElement('li-zi');
var idx = Math.random() > 0.5 ? 1 : -1;
lz.style.cssText += `
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.floor(Math.random() * 6)}s;
--xx: ${idx * Math.random() * 1000}px;
--yy: ${Math.random() * -800}px;
--deg: ${Math.random() * 720}deg;
`;
mydiv.appendChild(lz);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

南无月 发表于 2024-7-30 19:29

来看看有没有新的说明。
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
这个粒子飞得方向不同。
水平1000，上下800，正负值可改方向

南无月 发表于 2024-7-30 19:31

var idx = Math.random() > 0.5? 1 : -1;
这个结构跟控制播放和暂停的样子有点像，又跟改变方向的有点像。。

瞎猜一下，一半向左一半向右？合起来刚好左右两半。。{:4_170:}

南无月 发表于 2024-7-30 19:33

小船会动，看了下是张GIF图片，用径向渐变模糊边缘，有羽化效果。。

南无月 发表于 2024-7-30 19:35

粒子的颜色及裁的形状跟草丛几乎一样，浑然一体
整贴色彩清爽，灵动透彻。。
迸发的粒子如喷泉一般，飞向各处，这个世界的确很梦幻
为白老师超凡的创意点赞。。{:4_199:}

马黑黑 发表于 2024-7-30 20:20

南无月发表于 2024-7-30 19:35
粒子的颜色及裁的形状跟草丛几乎一样，浑然一体
整贴色彩清爽，灵动透彻。。
迸发的粒子如喷泉一般，飞向 ...

这是多拖地板就能做出来的{:4_170:}

马黑黑 发表于 2024-7-30 20:20

南无月发表于 2024-7-30 19:33
小船会动，看了下是张GIF图片，用径向渐变模糊边缘，有羽化效果。。

PS学的透

马黑黑 发表于 2024-7-30 20:22

南无月发表于 2024-7-30 19:31
var idx = Math.random() > 0.5? 1 : -1;
这个结构跟控制播放和暂停的样子有点像，又跟改变方向的有点像。 ...

猜对了。Math.random()得到 0~0.999... 的浮点数，如果它大于0.5，idx等于 1，否则等于 -1，然后它将乘上一定的数，结果是正负两种都有，那样纸，基于X坐标，非左即右，若基于Y坐标，非上即下。

马黑黑 发表于 2024-7-30 20:24

南无月发表于 2024-7-30 19:29
来看看有没有新的说明。
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var( ...

解读正确。不加以说明就是想逼一下大家去想一想实现的细节。

红影发表于 2024-7-30 20:47

用mask把小船融合得那么无痕，漂亮{:4_199:}

红影发表于 2024-7-30 20:52

向两边飘飞的叶子，真漂亮。box-shadow: inset 0 0 10px yellow;这个前面的帖子讲过，无论怎样变色，都是基于yellow，既可以让叶子有不同颜色，又不会出现不想要的颜色{:4_187:}

红影发表于 2024-7-30 20:53

var idx = Math.random() > 0.5 ? 1 : -1;
如果是小于，也能分成一半一半吧{:4_173:}

红影发表于 2024-7-30 20:53

黑黑厉害，又是一个新的代码效果呢{:4_199:}

马黑黑 发表于 2024-7-30 21:13

红影发表于 2024-7-30 20:53
黑黑厉害，又是一个新的代码效果呢

这个简简单单的

马黑黑 发表于 2024-7-30 21:13

红影发表于 2024-7-30 20:53
var idx = Math.random() > 0.5 ? 1 : -1;
如果是小于，也能分成一半一半吧

要的是 1 或 -1

红影发表于 2024-7-30 22:04

马黑黑发表于 2024-7-30 21:13
这个简简单单的

但设计得很美{:4_187:}

红影发表于 2024-7-30 22:04

马黑黑发表于 2024-7-30 21:13
要的是 1 或 -1

问题是在一半的地方进行划分，这个设计很巧妙{:4_199:}

马黑黑 发表于 2024-7-30 22:38

红影发表于 2024-7-30 22:04
问题是在一半的地方进行划分，这个设计很巧妙

这是权重问题，你设为0.3的话，就有所偏颇

马黑黑 发表于 2024-7-30 22:39

红影发表于 2024-7-30 22:04
但设计得很美
简单的东东设计得美很容易的，比如镁铝穿衣服，穿的越少越好。这谁不会？

页: [1] 2 3

花潮论坛's Archiver

World IN Dream