全屏切换幻灯片特效-html代码-BFW代码库

全屏切换幻灯片特效

代码语言：html

所属分类：幻灯片

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> - parallaxy slides</title>
    <link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            overflow: hidden;
            font-family: "Merriweather Sans", sans-serif;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        .slide-wrap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            cursor: pointer;
        }

        .slide {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .slide .image {
            background-size: cover;
            width: 100%;
            height: 100%;
        }

        .text {
            position: absolute;
            font-size: 3rem;
            color: #fff;
            top: 0px;
            left: 0px;
            text-transform: uppercase;
            margin-left: 20px;
        }
        .text p {
            margin: 0;
        }

        .instructions {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
            color: #fff;
            font-size: 14px;
        }

    </style>

</head>
<body translate="no">
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-1.jpg)"></div>
        </div>
        <div class="text">
            <p>
                Sand &amp;
            </p>
            <p>
                Rocks &amp;
            </p>
            <p>
                Water &amp;
            </p>
            <p>
                Sky
            </p>
        </di.........完整代码请登录后点击上方下载按钮下载查看