南京大屠杀纪念日公祭日手机端移动端微页面代码
代码语言: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 eas.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0