海神玟

马黑黑 发表于 2025-8-4 13:41

马黑黑 发表于 2025-8-4 13:43

本帖最后由马黑黑于 2025-8-4 14:02 编辑 <br /><br /><div style="left: calc(50% - 81px); transform: translateX(-50%); width: 1100px; position: relative; z-index: 1;">

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/huw.jpg') no-repeat center/cover; --ma-size: 30%; }
#ma { --opacity: 1; display: grid; place-items: center; }
#ma::before, #ma::after { position: absolute; content: ''; background: url('https://638183.freep.cn/638183/small/2025/uvjk01.webp') no-repeat center/cover; transition: 0.45s; }
#ma::before { width: 100%; height: 100%; opacity: var(--opacity); mask: url('https://638183.freep.cn/638183/web/svg/balls1.svg') no-repeat center/cover; }
#ma::after { width: 30%; height: 30%; border-radius: 50%; opacity: 0.5; box-shadow: 0 0 16px white, inset 0 0 46px skyblue; transform: scale(var(--scale)); }
#btnFs { bottom: 20px; color: #eee; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2041283274" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614adf28bc57b.mp4" autoplay loop muted></video>
<div id="ma" class="hue-rotate"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
aud.onplaying = aud.onpause = () => ma.style.setProperty('--opacity', aud.paused ? 0 : 1);
aud.ontimeupdate = () => ma.style.setProperty('--scale', Math.random() * 0.5 + 1);
</script>
</div>

</div>

<script type="module">
import lnum from 'https://638183.freep.cn/638183/web/js/lnum.js';
lnum();
</script>

梦江南 发表于 2025-8-4 13:53

问好老师，谢谢精彩分享。{:4_190:}

马黑黑 发表于 2025-8-4 13:53

梦江南发表于 2025-8-4 13:53
问好老师，谢谢精彩分享。

{:4_190:}

花飞飞 发表于 2025-8-4 14:05

马黑黑发表于 2025-8-4 13:43
本帖最后由马黑黑于 2025-8-4 14:02 编辑

这个带行号代码可以跟贴子一样超出边框。。。显得更大气了。。
怎么整的呀，昨天教程里还不是这样

马黑黑 发表于 2025-8-4 14:08

花飞飞发表于 2025-8-4 14:05
这个带行号代码可以跟贴子一样超出边框。。。显得更大气了。。
怎么整的呀，昨天教程里还不是这样

这个和做帖子一样的吧：

做一个容器，把要发的代码作为该容器的子内容。然后，设置好容器的定位即可，和做帖子的容器一个道理

花飞飞 发表于 2025-8-4 14:17

背景是一张纹理图，旋转小球遮罩显示。。。这个可以理解。。
中间那个30%的圆，怎么忽大忽小的，看了半天也不知道哪里设置的。。

花飞飞 发表于 2025-8-4 14:21

现在回到画面看看，
大海里有这样的巨大风车还是很少见的，跟舰船相比，算是庞然大物了。。。
旋转的粒子画面搅动风力，搭配视频粒子能量满满。。{:4_199:}

杨帆发表于 2025-8-4 17:57

构思新颖，效果美妙，谢谢马老师精彩分享{:4_191:}

马黑黑 发表于 2025-8-4 18:25

花飞飞发表于 2025-8-4 14:17
背景是一张纹理图，旋转小球遮罩显示。。。这个可以理解。。
中间那个30%的圆，怎么忽大忽小的，看了半天 ...

#ma::after 伪元素中有一句：

   transform: scale(var(--scale));

scale 是 transform 转换属性中的一个函数，该函数表示元素做伸缩转换，--scale 变量值是百分比或倍数值，例如 120% 或 1.2，表示元素伸缩百分之一百二或 1.2 倍。

而 JS 代码中的这一句：

   aud.ontimeupdate = () => ma.style.setProperty('--scale', Math.random() * 0.5 + 1);

则给 ma 元素的 --scale 变量赋值，aud.ontimeupdate 表示音频标签播放时间更新，一般是差不多每秒更新一次，每一次更新，都给 ma 元素所需的 --scale 变量赋值，值的范围在 1~1.5之间，也就是最多放大 1.5 倍。

小球的伸缩动作与另一句CSS代码有密切关系：

   transition: 0.45s;

这句代码规定，使用了该句代码的对象（元素或伪元素）的每一个动作在 0.45秒内完成。设置不同的值，对象的运动形态会不一样。这个 transition 一般不会影响 animation 运行的 @keyframes 动画（但据说也不一定）。

马黑黑 发表于 2025-8-4 18:27

花飞飞发表于 2025-8-4 14:21
现在回到画面看看，
大海里有这样的巨大风车还是很少见的，跟舰船相比，算是庞然大物了。。。
旋转的粒子 ...

风力发电的风车一般都这么大，可能还要大。然后有机会你去荷兰瞧瞧，那里是风车的集中营，大大小小都有，很是壮观。

马黑黑 发表于 2025-8-4 18:27

杨帆发表于 2025-8-4 17:57
构思新颖，效果美妙，谢谢马老师精彩分享

{:4_190:}

花飞飞 发表于 2025-8-4 19:52

马黑黑发表于 2025-8-4 14:08
这个和做帖子一样的吧：

做一个容器，把要发的代码作为该容器的子内容。然后，设置好容器的定位即可， ...

也是。。突然看它飘在空中，有点惊奇。。。看呀看呀就习惯了。

花飞飞 发表于 2025-8-4 19:56

马黑黑发表于 2025-8-4 18:27
风力发电的风车一般都这么大，可能还要大。然后有机会你去荷兰瞧瞧，那里是风车的集中营，大大小小都有， ...

见过山顶的，没这么大？
还是因为远远看不明显，应该跟山比一比。。
这个是真大，干嘛埋海里，好辛苦。。比桥梁麻烦吧，{:4_173:}

花飞飞 发表于 2025-8-4 20:01

马黑黑发表于 2025-8-4 18:25
#ma::after 伪元素中有一句：

transform: scale(var(--scale));

我的上帝，果然是在JS里控制的，难怪我找不到。。
transition: 0.45s;这个管速度的找到了，管转圈的也找到了。就是管变大小的你说了才明白。。
小白底子本来就差，缺下课问题就更多了。{:4_173:}

花飞飞 发表于 2025-8-4 20:02

马黑黑发表于 2025-8-4 18:27
风力发电的风车一般都这么大，可能还要大。然后有机会你去荷兰瞧瞧，那里是风车的集中营，大大小小都有， ...

看来荷兰风大，又缺电。咱们现在用燃烧垃圾发电，把垃圾分类都整没了。

马黑黑 发表于 2025-8-4 20:07

花飞飞发表于 2025-8-4 20:02
看来荷兰风大，又缺电。咱们现在用燃烧垃圾发电，把垃圾分类都整没了。

我们是多种手段并举：水力、风力、太阳能、潮汐等等都用上

马黑黑 发表于 2025-8-4 20:08

花飞飞发表于 2025-8-4 20:01
我的上帝，果然是在JS里控制的，难怪我找不到。。
transition: 0.45s;这个管速度的找到了，管转圈的 ...

transform: scale(n) 我们用的极少，所以没有多少印象也正常

马黑黑 发表于 2025-8-4 20:08

花飞飞发表于 2025-8-4 19:52
也是。。突然看它飘在空中，有点惊奇。。。看呀看呀就习惯了。

{:4_172:}

花飞飞 发表于 2025-8-4 20:13

马黑黑发表于 2025-8-4 20:07
我们是多种手段并举：水力、风力、太阳能、潮汐等等都用上

{:4_173:}电力第一大国。。不是盖的

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

海神玟