CSS电影谢幕效果

出处 https://juejin.cn/post/7002829486806794276#heading-1

<!-- run -->
<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;
}
.pic{
    height: 1000px;
    width: 1000px;
    position: absolute;
    background: url('https://cdn.jsdelivr.net/gh/WangGuibin/MyFilesRepo/images/20210703170812.JPG') no-repeat;
    background-size: cover;
    animation: fade-away 2.5s linear infinite forwards;    //forwards当动画完成后，保持最后一帧的状态
}
.text{
    position: absolute;
    line-height: 55px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    animation: show 2s 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>

标签：opacity,forwards,50%,电影,height,谢幕,background,1000px,CSS
来源： https://www.cnblogs.com/wgb1234/p/15641736.html