banner 背景视频 文字飞入

<div class="home-banner overflow" {{ app('visual').url('section', 16079) }}>
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-video">
            <video src="{{ app('section').id(49213).content.summary | videos_url }}" autoplay muted loop x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="false" playsinline="false"></video>
            <div class="text">
                <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".1s">精密铁芯制造商</h1>
                <h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".3s">公司专注研发、制造环形铁芯、CD铁芯、精密传感器铁芯</h2>
                <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".5s">查看更多</h3>
            </div>
        </div>
        {% for value in app('section').id(16079) %}
        <div class="swiper-slide">
            <a href="javascript:;"><img src="{{ value.img | img_format }}" alt="{{ value.name }}" /></a>
            <div class="text">
                <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".1s">{{ value.name }}</h1>
                <h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".3s">{{ value.summary }}</h2>
                <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay=".5s">查看更多</h3>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script src="//cdn.myxypt.com/lxin1wzs/t/1/assets/swiper.animate.min.js"></script>

<script>
  // banner
    var banner_swiper = new Swiper(".home-banner", {
        speed: 800,
        loop: false,
        autoplay: false,
        pagination: {
            el: '.swiper-pagination1',
            type: 'progressbar',
        },
        navigation: {
          nextEl: ".swiper-button-next1",
          prevEl: ".swiper-button-prev1",
        },
        on:{
            init: function(){
                swiperAnimateCache(this);
                swiperAnimate(this);
            }, 
            slideChangeTransitionEnd: function(){ 
                swiperAnimate(this);
            } 
        },
    });
</script>

/*css*/
.home-banner{width:100%;position:relative}
.home-banner .swiper-slide{position:relative;overflow:hidden}
.home-banner .swiper-slide a{display:block}
.home-banner .swiper-slide a>img{display:block;width:100%;transform:scale(1.2);transition:all 2s ease-out}
.home-banner .swiper-slide.swiper-slide-active a>img{transform:scale(1)}
.home-banner .swiper-pagination1{position:relative;width:14.583vw;height:1px;background:#dddcd9;border-radius:0;overflow:hidden}
.home-banner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--main-theme-color)}
.home-banner .swiper-slide .text{position:absolute;z-index:9;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center}
.home-banner .swiper-slide .text h1{font-size:.8rem;opacity:1;font-weight:400;line-height:1;color:#fff;font-family:'PingFang SC'}
.home-banner .swiper-slide .text h2{font-size:.25rem;opacity:1;font-weight:400;line-height:1;color:#fff;font-family:'PingFang SC';margin:.3rem 0 .4rem}
.home-banner .swiper-slide .text h3{font-size:16px;opacity:1;font-weight:400;line-height:1;color:#fff;margin:0 auto}
.banner-grid{position:absolute;bottom:4.1666vw;width:100%}
.swiper-button-next1,.swiper-button-prev1{position:relative;left:0;right:0;top:0;bottom:0;margin:0 12px;width:auto}
.banner-grid .swiper-button-next1:after,.banner-grid .swiper-button-prev1:after{font-size:14px;font-family:arial;text-transform:capitalize!important;color:#fff}
.swiper-slide-video{position:relative;padding-bottom:47.92%}
.swiper-slide-video video{position:absolute;left:0;top:0;height:100%;width:100%;object-fit:cover}
@keyframes text-active-animation{from{opacity:0;filter:Alpha(opacity=0);-webkit-transform:translateX(100px);transform:translateX(100px)}
to{opacity:1;filter:Alpha(opacity=100);-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes text-active-animation-reverse{from{opacity:1;filter:Alpha(opacity=100);-webkit-transform:translateX(0);transform:translateX(0)}
to{opacity:0;filter:Alpha(opacity=0);-webkit-transform:translateX(-200px);transform:translateX(-200px)}
}
@keyframes text-fade-out{from{opacity:1;filter:Alpha(opacity=100)}
to{opacity:0;filter:Alpha(opacity=0)}
}