海神玟

马黑黑

马黑黑

<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>

梦江南

问好老师，谢谢精彩分享。

马黑黑

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

花飞飞

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

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

马黑黑

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

这个和做帖子一样的吧：

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

花飞飞

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

花飞飞

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

杨帆

构思新颖，效果美妙，谢谢马老师精彩分享

马黑黑

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

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

马黑黑

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

花飞飞

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

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

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

花飞飞

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

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

花飞飞

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

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

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

花飞飞

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

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

花飞飞

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

电力第一大国。。不是盖的