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 {
     .........完整代码请登录后点击上方下载按钮下载查看