背景图片放大幻灯片切换效果

代码语言:html

所属分类:幻灯片

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');

* {
        box-sizing: border-box;
}

body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
}

.slider-container {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        height: 100vh;
        width: 100vw;
}

.slider-container h1 {
        color: #fff;
        font-size: 100px;
        letter-spacing: 5px;
        position: relative;
        z-index: 100;
        text-align: center;
}

.slider-container::after {
        background-color: #000;
        content: '';
        position: absolute;
        opacity: 0.3;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
}

.slide {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        height: 100%;
        width: 100%;
        transform: scale(1.15);
        transition: opacity .6s ease;
}

.slide.active {
        animation: grow 4s linear forwards;
        opacity: 1;
}

@keyframes grow {
        0%, 20% {
                transform: scale(1);
        }
       
        75%, 100% {
                transform: scale(1.15);
        }
}

.cont.........完整代码请登录后点击上方下载按钮下载查看

网友评论0