南京大屠杀纪念日公祭日手机端移动端微页面代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：南京大屠杀纪念日公祭日手机端移动端微页面代码，勿忘历史。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>铭记·南京1937</title>
    <style>
        @charset "utf-8";
        * {
        margin:0;
        padding:0
}
html,body,button,input,select,textarea {
        font-size:62.5%
}
html {
        height:100%
}
body {
        margin:0;
        position:relative;
        height:100%;
        background-color:#CCC;
        font-family:Microsoft YaHei;
        font-size:1.8rem
}
.swiper-container {
        width:100%;
        height:100%;
        color:#fff
}
.swiper-container {
        margin:0 auto;
        position:relative;
        overflow:hidden;
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
        -ms-backface-visibility:hidden;
        -o-backface-visibility:hidden;
        backface-visibility:hidden;
        z-index:1
}
.swiper-wrapper {
        position:relative;
        width:100%;
        -webkit-transition-property:-webkit-transform,left,top;
        -webkit-transition-duration:0s;
        -webkit-transform:translate3d(0px,0,0);
        -webkit-transition-timing-function:ease;
        -moz-transition-property:-moz-transform,left,top;
        -moz-transition-duration:0s;
        -moz-transform:translate3d(0px,0,0);
        -moz-transition-timing-function:ease;
        -o-transition-property:-o-transform,left,top;
        -o-transition-duration:0s;
        -o-transform:translate3d(0px,0,0);
        -o-transition-timing-function:ease;
        -o-transform:translate(0px,0px);
        -ms-transition-property:-ms-transform,left,top;
        -ms-transition-duration:0s;
        -ms-transform:translate3d(0px,0,0);
        -ms-transition-timing-function:ease;
        transition-property:transform,left,top;
        transition-duration:0s;
        transform:translate3d(0px,0,0);
        transition-timing-function:ease
}
.swiper-free-mode>.swiper-wrapper {
        -webkit-transition-timing-function:ease-out;
        -moz-transition-timing-function:ease-out;
        -ms-transition-timing-function:ease-out;
        -o-transition-timing-function:ease-out;
        transition-timing-function:ease-out;
        margin:0 auto
}
.pagination {
        position:absolute;
        z-index:20;
        right:10px;
        top:50%;
        margin-top:-90px
}
.swiper-pagination-switch {
        display:block;
        width:8px;
        height:8px;
        -webkit-border-radius:8px;
        -moz-border-radius:8px;
        -ms-border-radius:8px;
        background:#555;
        margin:0 0 5px;
        opacity:.8;
        cursor:pointer
}
.swiper-active-switch {
        background:#fff
}
.videobox {
        width:100%;
        height:100%;
        position:absolute;
        z-index:21;
        background:rgba(0,0,0,.9);
        display:none
}
#myAudio {
        display:none
}
.player-button {
        display:block;
        width:27px;
        height:19px;
        position:fixed;
        right:10px;
        bottom:15px;
        z-index:100000;
        cursor:pointer;
        background:url(//repo.bfw.wiki/bfwrepo/images/nanjing/music.png) no-repeat;
        background-position:0 0
}
.player-button-stop {
        background-position:0 -19px
}
.swiper-slide {
        position:relative;
        overflow:hidden
}
.swiper-slide .bg {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:0
}
.swiper-slide .bg img {
        display:block;
        width:100%;
        height:100%
}
.s-jiantou {
        position:absolute;
        left:45%;
        bottom:5%;
        width:7%;
        opacity:0;
        transition:all 1s
}
.s-jiantou img {
        width:100%
}
.swiper-slide-active .s-jiantou {
        opacity:.7;
        -webkit-animation:fadeInUp 1s 3s ease both;
        -moz-animation:fadeInUp 1s 3s ease both;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite
}
.s-001_title {
        position:absolute;
        width:90%;
        left:2%;
        top:50%;
        opacity:0;
        -webkit-transform:scale(0.5,0.5);
        transform:scale(0.5,0.5);
        transition:all 1s
}
.s-001_title img {
        width:100%
}
.swiper-slide-active .s-001_title {
        opacity:1;
        width:90%;
        left:3%;
        top:30%;
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        transition-delay:.5s
}
.text {
        line-height:130%;
        color:#ccc;
        opacity:0;
        transition:all 1s
}
.swiper-slide-active .text {
        opacity:1;
        animation:show 2s ease-in-out;
        -moz-animation:show 2s ease-in-out;
        -webkit-animation:show 2s ease-in-out;
        -o-animation:show 2s ease-in-out
}
.s-002_text {
        position:absolute;
        width:90%;
        left:5%;
        top:30%;
        font-weight:bold;
        text-indent:2em
}
.s-004_text {
        position:absolute;
        width:100%;
        left:0;
        top:40%;
        text-align:center;
        font-weight:bold
}
.s-005_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-006_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-007_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-008_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-009_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-010_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-011_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-012_text {
        position:absolute;
        width:80%;
        left:10%;
        bottom:5%
}
.s-005_text h3,.s-006_text h3,.s-007_text h3,.s-008_text h3,.s-009_text h3,.s-010_text h3,.s-011_text h3,.s-012_text h3 {
        color:#fbfbfb;
        font-weight:normal
}
.s-005_text p,.s-006_text p,.s-007_text p,.s-008_text p,.s-009_text p,.s-010_text p,.s-011_text p,.s-012_text p {
        font-size:1.6rem;
        padding:10px 0 8px;
        text-indent:2em
}
.s-005_text h4,.s-006_text h4,.s-007_text h4,.s-008_text h4,.s-009_text h4,.s-010_text h4,.s-011_text h4,.s-012_text h4 {
        text-align:right;
        font-weight:normal
}
.text1 {
        color:#ccc
}
.s-013_text {
        line-height:150%;
        position:absolute;
        width:75%;
        left:12%;
        top:10%
}
.s-013_text p {
        text-indent:2em;
        padding-top:10px;
        font-weight:bold
}
.s-013_text p font {
        color:#b60000
}
.s-013_text p.type1 {
        opacity:0;
        transition:all 1s
}
.swiper-slide-active .s-013_text p.type1 {
        opacity:1;
        animation:show 2s ease-in-out;
        -moz-animation:show 2s ease-in-out;
        -webkit-animation:show 2s ease-in-out;
        -o-animation:show 2s ease-in-out
}
.s-013_text p.type2 {
        opacity:0;
        transition:all 1s
}
.swiper-slide-active .s-013_text p.type2 {
        opacity:1;
        animation:show 2s ease-in-out;
        transition-delay:1s;
        -moz-animation:show 2s ease-in-out;
        -moz-transition-delay:1s;
        -webkit-animation:show 2s ease-in-out;
        -webkit-transition-delay:1s;
        -o-animation:show 2s ease-in-out;
        -o-transition-delay:1s
}
.s-013_text p.type3 {
        opacity:0;
        transition:all 1s;
        a
}
.swiper-slide-active .s-013_text p.type3 {
        opacity:1;
        animation:show 2s ease-in-out;
        transition-delay:2s;
        -moz-animation:show 2s ease-in-out;
        -moz-transition-delay:2s;
        -webkit-animation:show 2s ease-in-out;
        -webkit-transition-delay:2s;
        -o-animation:show 2s ease-in-out;
        -o-transition-delay:2s
}
.s-013_text p.type4 {
        opacity:0;
        transition:all 1s
}
.swiper-slide-active .s-013_text p.type4 {
        opacity:1;
        animation:show 2s ease-in-out;
        transition-delay:3s;
        -moz-animation:show 2s ease-in-out;
        -moz-transition-delay:6s;
        -webkit-animation:show 2s ease-in-out;
        -webkit-transition-delay:6.........完整代码请登录后点击上方下载按钮下载查看