CSS--视频淡出

前言

参考自大佬的文章：大佬的文章
这里主要是为了实现一种鼠标往下滑，视频的透明度逐渐趋于-1的过程（就是相当于变黑的意思）

代码

<section>
    <video src="../112/077680587_main_xl.mp4" muted autoplay loop></video>
  </section>
  <section>
    <div class="content">
      <h2>玩会手机就睡觉</h2>
      <p>
        一、
捧着半盏清茶,临窗而立.想不到这个夏日的天空竟是这般阴沉,常常会有暴雨不期而至,把人的心思惹得如细浪翻飞.
我喜欢站在立地玻璃前,看蓝色的电光划过天际,看乌云墨染苍穹,听雷声响彻,顷刻便大雨滂沱,外面的世界如同破碎.一道道的雨痕拍打下来,让人有些许的惊恐,继而感觉孤单无助.
这夏日的雨,总是来得那么直接和淋漓尽致.说不清,这究竟是不是我心中期待的大雨,只是觉得有着很深的寒意,于是,紧紧地抱紧双臂,尽管依然感觉不到温暖.
雨之淋漓,目之所及,总有一些意味深长的思绪涌现心头.谁说这样阴沉的天气、连绵不绝的暴雨不也是季节的美丽风景呢?
也许我们乐于看见阳光,明媚的阳光总能给人带来希望、愉悦的心情.其实我也喜欢这样的下雨天,在微凉的房子里,看大雨倾泻而下,酣畅淋漓,尽洗夏日的炎热和喧嚣,烦躁驿动的心,也会跟着慢慢沉淀,仿佛也在这一刻静静地停憩,以平静柔和的心态慢慢审视走过的似水年华.
二、
于是,许多雨中的思绪在我微凉的指尖轻轻滑落.年华似水呵,当我站在流年的水岸轻声叹息,总有一些淡淡的温暖和疼痛在心底纠缠不清.
我不太喜欢脆弱这个名词,终究觉得这个词语过于奢侈.是呵,谁能说红尘不是一种历练?每天,都会上演着不同的故事,我们只需要淡然从容地面对,而无需给自己脆弱的理由.
在渐次老去的年月里,浮尘种种,皆如浮云流水,喜也好,悲也罢,那都是岁月留下的痕迹,终会归于平静.时光总是迈着浅浅的步子,不经意地从我们的身边流过.所有的艰难困苦,最终会一一迎刃而解.所有的悲欢离合,最终会如淡香舒卷,化作记忆中的永恒回想.许多年以后,当蓦然回首,那时,心中定会空净得如深谷幽兰,宁静而娴雅.
听着雨声,我在静默中让自己跟自己对峙.
曾几何时,每一个夜深人静,有我深深的叹息、挥之不去的悲凉?曾几何时,我无法摆脱人世的繁杂、凡尘的禁锢?曾几何时,我问风,风无语,问雨,雨亦无言,唯有把支离破碎的过往幻化作孤独的模样,把满腹的苦涩化作无奈?
曾以为,一切不过如此.曾以为,人生可以沉沦.只是某一天,母亲在病榻上,跟我说过一句话,她说：即使不懂得人生的真谛,也必须感谢生命的慈悲.于是,所有的困惑就在母亲的这句话中释然,所有的眉结就在这一刻舒展.
      </p>
    </section>
</div>
  <script>
    let video = document.querySelector('video');
    window.addEventListener('scroll', function() {
      let value = 1 + window.scrollY / -1000;
      video.style.opacity = value;
    })
  </script>

*{
          padding: 0;
          margin: 0;
          box-sizing: border-box;
      }
      body{
          background-color: #000;
      }
      section{
          width: 100%;
          display: flex;
          height: 700px;
          justify-content: center;
          align-items: center;
      }
      video{
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      div{
          width: 100%;
          height: 100%;
          background-color: rgb(159, 200, 233);
          padding-left: 100px;
          padding-right: 100px;
      }
      div h2{
          position: relative;
          font-size: 30px;
          color: #fff;
          padding: 30px 500px;
      }
      div p{
          color: #fff;
          font-size: 25px;
      }

一开始：
滑动后：

标签：width,--,100%,padding,color,video,div,淡出,CSS
来源： https://blog.csdn.net/weixin_52283867/article/details/117330492