CSS 3.0 结合video视频实现的创意开幕效果

 给大家分享一个用CSS 3.0结合video视频实现的创意开幕，效果如下： 

以下是代码实现，欢迎大家复制粘贴和收藏。

    
    
    
    
    
 * {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
 }
 body {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     background: #000;
 }
 h2 {
     position: relative;
     font-size: 3.4em;
     font-weight: 900;
     color: #fff;
     z-index: 1;
     overflow: hidden;
     margin: 20px 20px 0 0;
 }
 h2 span {
     color: #ff022c;
 }
 h2::before {
     content: '';
     position: absolute;
     left: -20%;
     width: 120%;
     height: 100%;
     background: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
     animation: animate 5.5s linear forwards;
     animation-delay: 2s;
 }
 @keyframes animate {
     0% {
  left: -20%;
     }
     100% {
  left: 110%;
     }
 }
 video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 2;
     pointer-events: none;
     mix-blend-mode: screen;
 }
    


    
    We must unite against COVID-19

 总结

到此这篇关于CSS 3.0 结合video视频实现的创意开幕的文章就介绍到这了,更多相关css video视频开幕内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！