CSS电影谢幕效果

<!-- run -->
<!-- 出处 https://juejin.cn/post/7002829486806794276#heading-1 -->
<div class="container">
  <div class="pic"></div>
  <div class="text">
    <p>如果生活中有什么使你感到快乐，那就去做吧</p>
    <br>
    <p>不要管别人说什么</p>
  </div>
</div>

<style>
.container{
 top: 100px;
 bottom: 20%;
 height: 1000px;
 width: 1000px;
background: #fff;
font-size: 0px;
}
.pic{
    height: 300px;
    width: 1440px;
    position: absolute;
    background: url('https://img2022.cnblogs.com/blog/797853/202207/797853-20220722213945576-2055182105.jpg') no-repeat;
    background-size: contain;
    animation: fade-away 3s linear infinite forwards;    //forwards当动画完成后，保持最后一帧的状态
}
.text{
    position: absolute;
    line-height: 50px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    left: 10%;
    top: 10%;
    transform: translate(30%,40%);
    opacity: 0;
    animation: show 2.5s cubic-bezier(.74,-0.1,.86,.83) infinite forwards;
}
    
@keyframes fade-away {    //背景图的明暗度动画
    30%{
        filter: brightness(1);
    }
    100%{
        filter: brightness(0);
    }
}
@keyframes show{         //文字的透明度动画
    20%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
</style>