Elementor Pro自定义透明度动画实现求助（附参考案例与CSS代码）

我是Elementor Pro新手，想实现类似参考网站的自定义透明度动画，查过教程还是搞不懂，现在结合提取的CSS代码，给你一步步讲怎么实现：

先看懂参考代码的逻辑 #

提取的CSS是通过伪元素+类切换来实现透明度动画的：

• 给视频容器创建两个全屏伪元素（:after和:before），用来做遮罩层
• 默认状态下，黑色的:after伪元素透明度为0，设置了3秒的透明度过渡动画，还延迟6.25秒才启动
• 当给外层容器加上video-in类时，伪元素的透明度变成1，触发过渡效果，实现从透明到黑色的渐变

在Elementor里一步步实现 #

1. 搭建页面结构 #

• 新建一个Section，在Elementor「高级」面板里给它加自定义CSS类：hero hero--home
• 在这个Section里添加视频模块（或者设置视频背景），然后给视频所在的容器（比如Section内的Column，或者视频模块本身）加自定义CSS类：hero-video-wrap
• 记得给hero-video-wrap这个容器设置相对定位（Elementor「高级」面板→位置→相对），不然伪元素会乱跑

2. 添加自定义CSS #

打开Elementor的「自定义CSS」（可以是当前页面的，也可以是全局的），粘贴下面的代码：

/* 创建全屏遮罩伪元素 */
.hero.hero--home .hero-video-wrap:after, .hero.hero--home .hero-video-wrap:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

/* 设置遮罩初始状态和动画参数 */
.hero.hero--home .hero-video-wrap:after {
    background-color: #000;
    opacity: 0;
    transition: opacity 3s ease;
    transition-delay: 6.25s;
}

/* 触发动画的类 */
.hero.hero--home.video-in .hero-video-wrap:after, .hero.hero--home.video-in .hero-video-wrap:before {
    opacity: 1;
}

• 要是你的视频元素有专属类名，可以自己调整代码里的相关选择器，确保对应到你的视频模块

3. 触发动画（给容器加video-in类） #

要让动画跑起来，得给外层的hero hero--home容器加上video-in类，两种方式：

• 自动触发：页面加载后等6.25秒自动加类，把下面的JS代码放到Elementor「自定义JavaScript」里：

  window.addEventListener('load', function() {
      setTimeout(function() {
          document.querySelector('.hero.hero--home').classList.add('video-in');
      }, 6250); // 这里的毫秒数对应CSS里的延迟时间6.25秒
  });
  

• 滚动触发：如果想滚动到这个Section时再触发动画，可以用Elementor Pro的「自定义动作」，或者第三方插件的滚动触发功能，设置滚动到目标Section时添加video-in类

4. 自定义调整 #

• 想改动画时长？把transition: opacity 3s ease里的3s换成你要的时间，比如2s就是2秒
• 想改延迟时间？调整transition-delay: 6.25s的数值就行
• 遮罩颜色可以换成半透明的，比如background-color: rgba(0,0,0,0.6)

内容的提问来源于stack exchange，提问作者MoinDeDroper