CSS虹膜擦除效果-（隧道末端的灯光）

我想创建一个CSS效果，它可以以某种方式复制类似于以下内容的“隧道尽头”效果：

我试图在网上寻找可行的解决方案，但没有任何结果

我从零开始，所以我现在只有两个div，它们有不同的背景，我希望上面的那个慢慢消失

有什么想法或建议可以开始吗

以下是初始代码，无论如何都不会有什么帮助：

模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<main> 
<div></div> <!--this one should do the tunnel thing -->
<div>my content will be here</div>
</main>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：`
我的内容会在这里
`,
样式URL:['./app.component.scss']
})
导出类AppComponent{
}
< /代码> 如果仅涉及背景和图像，可以考虑多个背景层，在这里可以使用扩展的径向梯度：


正文{
保证金：0；
高度：100vh；
背景：
径向梯度（圆形，透明1%，#000 1.5%），
网址(https://picsum.photos/1000/800?image=1069);
背景位置：中心；
背景尺寸：100%100%，封面；
过渡：1s全部；
}
身体：悬停{
背景尺寸：10000%10000%，封面；
}
到目前为止，您有过类似的经历吗？当然，您至少有一些代码可以在中共享。类似于。。youtube视频？我正在用angular重构我的投资组合，代码相当混乱，但这里有一个到回购协议的链接，实际上我没有尝试任何东西，因为我真的不知道从哪里开始，我也不想寻找“答案”但只是为了一个能把我介绍给idea@temaniAfif我一整天都在寻找类似的东西。如果有什么我不会问的。如果不清楚我想要达到什么效果，我会重申这个问题，不要在youtube视频上分享我们需要找到你想要的东西的链接。请尝试在这里使用Gif截图来描述它，并通过显示您的代码不幸的是，我们的想法是将内容隐藏起来，并在div上使用某种z索引来复制隧道效果。@Koop4检查更新，这是一个可以像您希望的那样进行调整的想法，我知道我必须了解更多pseuo元素。这就是我要找的。我对你有点不高兴，因为现在我已经有了解决办法！谢谢man@Koop4我还添加了另一种方法，可以让他们做他们用动画做的事情吗？（和动画延迟）？请不要再给我这个的代码了，只要回答是或不是，否则我会感到无助>，