CSS 效果代码备忘

CSS

全屏slide中全屏无滚动条实现方法

<div class="slide"></div>
.slide{
    width:100%;
    overflow:hidden;
}
var slideHeight = window.innerHeight;
var slide = document.getElementByClassName("slide")[0];
slide.style.height = slideHeight;

背景图片轮播不间断实现方法

两个绝对定位的盒子，使用相同的背景图片，接连的无限制的往复移动即可！

<div class="swiper-slide swiper_flow swiper-slide-active" style="height: 965px; margin-bottom: 30px;">
    <div class="temp_box">
        <div class="test01">
        </div>
        <div class="test02">
        </div>
    </div>
</div>
.swiper-slide-active .test01,.test02{
    width:100%;
    height:100%;
    background-image: url(./testBg.png);
    background-repeat: no-repeat;
    background-size:cover;
}
.swiper-slide-active  .test01{
    display: block;
    position: absolute;
    left:-100%;
    top:0;
    z-index:100;
    animation: move01 5s linear infinite;
}
.swiper-slide-active  .test02{
    display: block;
    position: absolute;
    left:0;
    top:0;
    animation: move02 5s linear infinite;
}
@keyframes move01{
    0%{
        left:-100%;
    }
    100%{
        left:0;
    }
}
@keyframes move02{
    0%{
        left:0%;
    }
    100%{
        left:100%;
    }
}