flipper实现翻书翻页效果代码-html代码-BFW代码库

flipper实现翻书翻页效果代码

代码语言：html

所属分类：其他

代码描述：flipper实现翻书翻页效果代码

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

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/flipper.min.css">
    <style>
        .demo-box {
        padding: 160px 0 80px 0;
    }
    
    #my-flipper, #myflipper {
        margin: 0 auto;
    }
    
    .flipper-page-padding-wrap {
        padding: 40px;
    }
    
    #myflipper h1 {
        text-align: center;
        font-size: 36px;
        line-height: 340px;
        font-weight: 100;
        font-style: italic;
    }
    
    #myflipper h2 {
        text-align: left;
        font-size: 22px;
    }
    
    p.headline.first {
        margin-top: 155px;
    }
    
    #myflipper p.headline {
        display: block;
        font-size: 16px;
        line-height: 22px;
        font-weight: 100;
        font-style: italic;
        text-align: center;
    }
    
    p.left {
        position: absolute;
        left: 30px;
        top: 30px;
        width: 40%;
    }
    
    p.right {
        position: absolute;
        width: 40%;
        bottom: 30px;
        right: 30px;
    }
    
    #myflipper .description.no-margin {
        margin-top: 40px;
    }
    
    .flipper-page .fullsize {
        /*	margin: -31px 0 0 -31px;*/
    }
    
    .mag {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
    }
    
    .mag img {
        float: left;
        margin: 0 10px 10px 0;
        width: 200px;
    }
    
    .video-wrapper {
        width: 700px;
        margin: 80px auto;
    }
    
    .video-wrapper h3 {
        font-size: 36px;
        line-height: 22px;
        font-weight: 100;
        cursor: pointer;
        text-align: center;
        font-family: helvetica;
        color: white;
        text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    }
    </style>
</head>

<body style="background:url(//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png) repeat;">
    <!-- LIVE DEMO -->
    <div class="demo-box">
        <div id="myflipper">
            <div class="flipper-page">
                <div class="flipper-page-padding-wrap">
                    <p class="headline first"> Flick to turn the page and see what Flipper can do.</p>
                </div>
            </div>
            <div class="flipp.........完整代码请登录后点击上方下载按钮下载查看