单图用CSS编程渐变特效（两个视频＋扣人物叠加＋动态图） 
云端漫步2013 发表在 教程交流 华声论坛 https://bbs.voc.com.cn/forum-163-1.html
**** 本内容跟帖回复才可浏览 *****作者声明：本帖为本人原创，未经本人和华声论坛许可，不得转载
以前我们爱好音画者喜欢FLASH做动画制作。或喜欢在单图大图上点缀swf格式的动画。但现在多数浏览器
为安全策略，因Flash 在其发展过程中暴露出了大量的安全漏洞，黑客可以利用这些漏洞入侵用户的
计算机系统，窃取个人信息、账号密码等敏感数据。而运行时会消耗大量内存和 CPU 资源，导致网页
加载时间变慢、页面冻结，甚至使浏览器崩溃，尤其是对于手机与移动设备，还会严重影响电池续航时间和设
备流畅度。且技术已过时。所以多数浏览器不支持FLASH插件。
随着 HTML5、CSS3 等新一代 Web 标准的不断发展和普及，它们能实现 Flash 的大部分功能，如播放视频、动画和实现交互等，且具有无需插件、更安全、性能更好等优势，逐渐成为网页开发的主流技术。
以下我简单说下：用HTML5、CSS编程代码可实现在单图大图上CSS动画效果。比如用代码编程，云朵、水流、灯笼、水泡、雪、雨、莹火虫、飘叶效果等。当然这些效果需要懂得英语理论知识。
以下作品。
要学习代码的可套用，这代码是明码，代码我写清楚了，发表时去除所有中文行如：/* 可根据需要调整透明度 */。你可照着做。
代码多数是英文与数字组成，如中文嵌入数据流慢打开图就慢切记。
以这段代码为：
1外边距：上下边距为 130px，左边距通过calc(50% - 900px)计算，实现了元素在水平方向上的特定定位
2布局：使用grid布局并通过place-items: center让子元素在容器中居中
3尺寸：宽 1800px，高 900px 的固定尺寸
4背景：浅蓝色背景色，同时设置了背景图片，图片不重复且居中显示，并且使用cover模式让图片覆盖整个容器
5阴影：添加了 3px 水平和垂直偏移、20px 模糊半径的黑色阴影
6用户交互：user-select: none禁止用户选中该元素内的内容
7溢出处理：overflow: hidden隐藏超出容器的内容
8定位：position: relative相对定位，z-index: 1设置堆叠层级
--------------------------------------------
这段代码为：
这段 CSS 代码的核心作用是，通过绝对定位和混合模式，让两个视频元素（#vid 和 #vid2）叠加显示，形成富有层次感的视觉效果。
两个视频都使用position: absolute脱离文档流，可自由叠加在其他元素上方。
#vid 尺寸为 100%，完全覆盖父容器（音画框加）；#vid2 尺寸为 130%，通过超出容器范围营造更饱满的视觉填充感。
----------------------------------------
这段代码为：
这段 CSS 代码的核心功能是精确定位页面中的鱼元素和人物元素，通过绝对定位、尺寸控制和层叠顺序，实现特定的视觉布局效果。
--------------------------------
这段代码为：
这段代码实现了一个包含背景音视频、游动鱼群和人物元素的动态页面，
1 个音频（背景音，自动循环）
2 个视频（背景层，静音自动循环）
8 条鱼图片（3 条单独 ID 的鱼、5 条.fish-school类鱼群）
1 个人物图片（静态元素）。
----------------------------
以上是作品全局代码，但在各论版块不同环境或配置问题，各论版块是独立模块，版块不升级，
渲染逻辑错误：版块若依赖 DOM 渲染（如前端页面），可能存在 “代码执行了但未挂载到 DOM” 的情况（如 Vue/React 中未调用render、未挂载到指定节点）。华声版块存在这些原因不能直接粘贴代码，如此我们将以下作品代码复制在.html格式内上传空间得到.html链用发帖代码发表。在复制在.html格式内时。
将这段代码为:
margin: 30px 0 30px calc(50% - 800px);
display: grid;
place-items: center;
width: 1800px;
height: 900px;
改为以下:
margin: 0 auto;
width: 1800px;
height: 900px;
[本帖最后由 云端漫步2013 于 2025-11-1 21:24 编辑]
| 
