纯css实现一个全屏缩放轮换背景图片效果代码-html代码-BFW代码库

纯css实现一个全屏缩放轮换背景图片效果代码

代码语言：html

所属分类：幻灯片

代码描述：纯css实现一个全屏缩放轮换背景图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body {
            background-color: #1F1F1F;
            overflow: hidden
        }
        .slideshow {
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .slideshow-image {
            position: absolute;
            width: 100%;
            height: 100%;
            background: no-repeat 50% 50%;
            background-size: cover;
            -webkit-animation-name: kenburns;
            animation-name: kenburns;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-duration: 16s;
            animation-duration: 16s;
            opacity: 1;
            transform: scale(1.2);
        }
        .slideshow-image:nth-child(1) {
            -webkit-animation-name: kenburns-1;
            animation-name: kenburns-1;
            z-index: 3;
        }
        .slideshow-image:nth-child(2) {
            -webkit-animation-name: kenburns-2;
            animation-name: kenburns-2;
            z-index: 2;
        }
        .slideshow-image:nth-child(3) {
            -webkit-animation-name: kenburns-3;
            animation-name: kenburns-3;
            z-index: 1;
        }
        .slideshow-image:nth-child(4) {
            -webkit-animation-name: kenburns-4;
            animation-name: kenburns-4;
            z-index: 0;
        }

@-webkit-keyframes kenburns-1 {
            0% {
                opacity: 1;
                transform: scale(1.2);
            }
            1.5625% {
                opacity: 1;
            }
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 0;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.2);
            }
            98.4375% {
                opacity: 0;
                transform: scale(1.2117647059);
            }
            100% {
                opacity: 1;
            }
        }

@keyframes kenburns-1 {
            0% {
                opacity: 1;
                transform: scale(1.2);
            }
            1.5625% {
                opacity: 1;
            }
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 0;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.2);
            }
            98.4375% {
                opacity: 0;
                transform: scale(1.2117647059);
            }
            100% {
                opacity: 1;
            }
        }
@-webkit-keyframes kenburns-2 {
            23.4375% {
                opacity: 1;
                transform: scale(1.2);
            }
            26.5625% {
                opacity: 1;
            }
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 0;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.2);
            }
        }
@keyframes kenburns-2 {
            23.4375% {
                opacity: 1;
                transform: scale(1.2);
            }
            26.5625% {
                opacity: 1;
            }
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 0;
                transform: scale(1);
            }
            100% {
              .........完整代码请登录后点击上方下载按钮下载查看