/* Demo Styles */
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container{
background: #fcc723;
}
.show{
display: block;
}
.hide{
display: none;
}
#load {
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
#load .icon {
position: absolute;
top: 50%;
left: 1.5rem;
width: 0.75rem;
height: 1.25rem;
margin-top: -0.6rem;
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/load.gif) no-repeat center;
background-size: 100% 100%;
}
#load .tips-sound {
position: absolute;
bottom: .3rem;
left: 1.3rem;
width: 1.15rem;
height: .2rem;
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/tips-sound.png) no-repeat center;
background-size: 100% 100%;
}
.wrap{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
#main{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
.line,.lineTw,.lineTh{
box-sizing: border-box;
width: 3.3rem;
height: 0.16rem;
border-radius: 0.08rem;
/*overflow: hidden;*/
border: 0.02rem solid #333;
margin: 0 auto;
/*position: relative;*/
position: absolute;
left: 0.225rem;
top: 4.95rem;
background: url('http://icon.zhiding.cn/stor-age/special/linuxH5/img/lineBg.png') no-repeat 50% center;
background-size: 200% 100%;
}
.tishi {
position: absolute;
width: 100%;
/*height: 0.165rem;*/
top: 5.28rem;
text-align: center;
}
.tishi img{
width: 0.47rem;
}
.clear {
clear: both;
overflow: hidden;
line-height: 0;
font-size: 0;
}
.moveBtn,.moveBtnTw,.moveBtnTh{
/*box-sizing: border-box;*/
display: inline-block;
width: 0.4rem;
height: 0.4rem;
/*border: 0.02rem solid #333;*/
background: url('http://icon.zhiding.cn/stor-age/special/linuxH5/img/moveBtnBg.png') no-repeat;
background-size: 100% 100%;
border-radius: 0.4rem;
position: absolute;
left: 1.45rem;
top: -0.15rem;
animation: huangdong 2s 0.5s linear forwards;
}
.er{
transition: all 0.3s linear;
}
@keyframes huangdong {
0%{
transform: translateX(0);
}
25% {
transform: translateX(20px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(-20px);
}
100% {
transform: translateX(0);
}
}
.page-wrapper{
position: absolute;
width: 100%;
height: 100%;
}
.content{
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
}
.content .titles{
width: 100%;
}
.checkImg,.checkImgTw,.checkImgTh{
/*box-sizing: border-box;*/
border: 0.03rem solid #333;
position: absolute;
left: 0.205rem;
top: 1.1rem;
width: 3.3rem;
height: 3.3rem;
}
.left,.right,.leftTw,.rightTw,.leftTh,.rightTh{
box-sizing: border-box;
position: absolute;
top: 0;
width: 50%;
height: 3.3rem;
overflow: hidden;
}
.leftbod{
border-right: 0.015rem solid #333;
}
.rightbod{
border-left: 0.015rem solid #333;
}
.img{
width: 100%;
height: 100%;
}
.left .img,.leftTw .img,.leftTh .img{
left: 0;
}
.right .img,.rightTw .img,.rightTh .img{
right: 0;
}
.img{
width: 3.3rem;
height: 3.3rem;
position: absolute;
/*transform: scale(1.5);*/
}
.img img{
width: 3.3rem;
position: absolute;
left: 0;
top: 0;
}
.left,.leftTw,.leftTh{
left: 0;
}
.right,.rightTw,.rightTh{
right: 0;
}
.left img,.right img,.leftTw img,.rightTw img,.leftTh img,.rightTh img{
height: 3.3rem;
position: absolute;
top: 0;
opacity: 1;
}
.left img,.leftTw img,.leftTh img{
left: 0;
}
.right img,.rightTw img,.rightTh img{
right: 0;
}
.before,.beforeTw,.beforeTh{
position: absolute;
z-index: 999;
bottom: -0.2rem;
left: 0.4rem;
width: 0.96rem;
}
.after,.afterTw,.afterTh{
position: absolute;
z-index: 999;
bottom: -0.2rem;
right: 0.4rem;
width: 0.96rem;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #000;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
audio {
display: inline;
float: left;
}
.music {
width: 70px;
height: 70px;
text-align: center;
/*line-height: 80px;*/
/*background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/ke01_img/off.png) ;*/
background-size: 100%;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
float: left;
}
/*.music-off {
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/ke01_img/on.png) ;
background-size: 100%;
}*/
.music-ani {
animation:musicRound 1s infinite linear;
-webkit-animation:musicRound 1s infinite linear;
}
@keyframes musicRound {
0% {
transform: rotate(0deg)
}
100% {
transform:rotate(360deg);
}
}
@-webkit-keyframes musicRound {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
}
}
.arrow {
position: fixed;
z-index: 100;
bottom: 0.2rem;
left: 1.725rem;
height: 0.3rem;
width: 0.3rem;
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/up.png);
background-size:100%;
text-align: center;
font-size: 90px;
color: red;
animation: arrowUp 3s infinite ease-in;
-webkit-animation: arrowUp 2s infinite ease-in;
}
@keyframes arrowUp {
0% {
transform:translateY(42px);
opacity: 0;
}
60% {
transform:translateY(12px);
opacity: 1;
}
100% {
transform:translateY(0px);
opacity: 0;
}
}
@-webkit-keyframes arrowUp {
0% {
-webkit-transform:translateY(20px);
opacity: 0;
}
60% {
-webkit-transform:translateY(12px);
opacity: 1;
}
100% {
-webkit-transform:translateY(0px);
opacity: 0;
}
}
.swiper-slide {
overflow: hidden;
}
.two {
position: relative;
}
h1 {
position: absolute;
top: 100px;
left: 50%;
transition-duration: 1.5s;
font-size: 50px;
}
.change {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg);
}
.big {
transform:scale(1.5);
-webkit-transform:scale(1.5);
}
.blue-slide {
position: relative;
}
.swiper-nested-1, .swiper-nested-2 {
width: 100%;
}
.test {
transition: all 5s ease 0s;
}
@keyframes proMove {
0% {
transform:translate3d(0,0,0);
}
100% {
transform:translate3d(-50%,-50%,0);
}
}
@-webkit-keyframes proMove {
0% {
-webkit-transform:translate3d(0,0,0);
}
100% {
-webkit-transform:translate3d(0%,-50%,0);
}
}
.head {
position: relative;
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/1_02.jpg) center center no-repeat;
background-size:100%;
}
.n2 {
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/2_02.jpg) no-repeat center center;
background-size: 100%;
}
.n3 {
position: relative;
/*background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/n3.jpg) no-repeat center center;*/
/*background-size: 100%;*/
}
.n4 {
/*background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/n3.jpg) no-repeat center center;*/
background-size: 100%;
}
.n5 {
/*background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/n3.jpg) no-repeat center center;*/
background-size: 100%;
}
.n6 {
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/n6.jpg) no-repeat center center;
background-size: 100%;
position: relative;
}
.n6 .naviga{
width: 100%;
text-align: center;
position: absolute;
top: 4.35rem;
}
.n6 img{
width: 2.29rem;
}
@media screen and (min-width: 768px) {
.swiper-container{
width: 768px;
margin: 0 auto;
}
.head,.n2,.n3,.n4,.n5,.n6{
background-size: 70% auto;
}
.line,.lineTw,.lineTh{
box-sizing: border-box;
width: 460px;
height: 22px;
border-radius: 11px;
/*overflow: hidden;*/
border: 4px solid #333;
margin: 0 auto;
/*position: relative;*/
position: absolute;
left: 154px;
top: 660px;
background: url('http://icon.zhiding.cn/stor-age/special/linuxH5/img/lineBg.png') no-repeat 50% center;
background-size: 200% 100%;
}
.tishi {
position: absolute;
width: 100%;
/*height: 0.165rem;*/
top: 735px;
text-align: center;
}
.tishi img{
width: 94px;
}
.clear {
clear: both;
overflow: hidden;
line-height: 0;
font-size: 0;
}
.moveBtn,.moveBtnTw,.moveBtnTh{
/*box-sizing: border-box;*/
display: inline-block;
width: 80px;
height: 80px;
/*border: 0.02rem solid #333;*/
background: url('http://icon.zhiding.cn/stor-age/special/linuxH5/img/moveBtnBg.png') no-repeat;
background-size: 100% 100%;
border-radius: 40px;
position: absolute;
left: 190px;
top: -30px;
animation: huangdong 2s 0.5s linear forwards;
}
.er{
transition: all 0.3s linear;
}
@keyframes huangdong {
0%{
transform: translateX(0);
}
25% {
transform: translateX(20px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(-20px);
}
100% {
transform: translateX(0);
}
}
.page-wrapper{
position: absolute;
width: 100%;
height: 100%;
}
.content{
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
}
.content .titles{
width: 45%;
margin: 0 auto;
}
.checkImg,.checkImgTw,.checkImgTh{
/*box-sizing: border-box;*/
border: 6px solid #333;
position: absolute;
left: 148px;
top: 100px;
width: 460px;
height: 460px;
}
.left,.right,.leftTw,.rightTw,.leftTh,.rightTh{
box-sizing: border-box;
position: absolute;
top: 0;
width: 50%;
height: 460px;
overflow: hidden;
}
.leftbod{
border-right: 3px solid #333;
}
.rightbod{
border-left: 3px solid #333;
}
.img{
width: 100%;
height: 100%;
}
.left .img,.leftTw .img,.leftTh .img{
left: 0;
}
.right .img,.rightTw .img,.rightTh .img{
right: 0;
}
.img{
width: 460px;
height: 460px;
position: absolute;
/*transform: scale(1.5);*/
}
.img img{
width: 460px;
position: absolute;
left: 0;
top: 0;
}
.left,.leftTw,.leftTh{
left: 0;
}
.right,.rightTw,.rightTh{
right: 0;
}
.left img,.right img,.leftTw img,.rightTw img,.leftTh img,.rightTh img{
height: 460px;
position: absolute;
top: 0;
opacity: 1;
}
.left img,.leftTw img,.leftTh img{
left: 0;
}
.right img,.rightTw img,.rightTh img{
right: 0;
}
.before,.beforeTw,.beforeTh{
position: absolute;
z-index: 999;
bottom: -20px;
left: 65px;
width: 100px;
}
.after,.afterTw,.afterTh{
position: absolute;
z-index: 999;
bottom: -20px;
right: 65px;
width: 100px;
}
.n6 .naviga{
width: 100%;
text-align: center;
position: absolute;
top: 600px;
}
.n6 img{
width: 300px;
}
.arrow {
position: fixed;
z-index: 100;
bottom: 20px;
left: 1.85rem;
height: 40px;
width: 40px;
background: url(http://icon.zhiding.cn/stor-age/special/linuxH5/img/up.png);
background-size:100%;
text-align: center;
font-size: 90px;
color: red;
animation: arrowUp 3s infinite ease-in;
-webkit-animation: arrowUp 2s infinite ease-in;
}
}