原生js实现三维倒影卡片式幻灯片效果代码-html代码-BFW代码库

原生js实现三维倒影卡片式幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：原生js实现三维倒影卡片式幻灯片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /*
        * Layout
        */
        
        html, body {
            position: relative;
            padding: 0;
            margin: 0;
            overflow: hidden;
        
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
            background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);
            
            height: 100%;
            width: 100%;
            
            text-align: center;
        
            font-family: sans-serif;
        }
        
        
        /*
        * Coverflow
        */
        
        
        #coverflow {
            height: 100%;
            width: 100%;
        
            -webkit-perspective: 600px;
        }
        
        #coverflow section {
            display: position;
            position: absolute;
            top: 50%;
            left: 50%;
            
            width: 170px;
            height: 170px;
            
            margin-left: -90px;
            margin-top: -90px;
            
            background-color: white;
            background-size: 100%;
            
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
           
            -webkit-transition: all 300ms ease-in;
             -moz-transition: all 300ms ease-in;
                -ms-transition: all 300ms ease-in;
                 -o-transition: all 300ms ease-in;
                    transition: all 300ms ease-in;
        
            -webkit-box-reflect: below 0
            -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(white)); 
        }
        
        
        
        /*
        * Controls
        */
        
        #controls {
            position: absolute;
            width: 100%;
            bottom: 10%;
            z-index: 1;
        
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        
            color: #999;
            font-size: 18px;
        }
        
        #controls a  {
            color: white; 
            cursor: pointer;
        }
        
        #controls a:hover  {
            color: 66FFFF;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script>
</head>

<body>

    <div id="coverflow">
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fc1aecf36d5a.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fe1bd1861604.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fc1afe38993c.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fe1bc8e0ed82.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fe1bcbdf1b79.png"></section>
        <section data-cover="//repo.bfw.wiki/bfwrepo/image/5fe1bce77bcbb.png"></section>
    </div>

    <nav id="co.........完整代码请登录后点击上方下载按钮下载查看