你的位置:首页 > 网页设计

[网页设计]前端微场景布局样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/hd.css">
<!-- Demo styles -->


<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<!-- Swiper -->
<div >
<div >
<div >
<div
swiper-animate-effect="zoomIn"
swiper-animate-duration="1.5s"
swiper-animate-delay="0.3s">
<img src="images/002.jpg" alt="">
</div>
<!--戒指区域-->
<div >
<img src="images/zhuanjie4.jpg" alt=""
swiper-animate-effect="fadeInDown"
swiper-animate-duration="1.5s"
swiper-animate-delay="2.6s">
<img src="images/0041.jpg" alt=""
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="1.6s">
<!--时间-->
<img src="images/005.jpg" alt=""
swiper-animate-effect="fadeIn"
swiper-animate-duration="1.5s"
swiper-animate-delay="3.6s">

</div>

<!--戒指区域结束-->

</div>
<div >
<div
swiper-animate-effect="zoomIn"
swiper-animate-duration="1.5s"
swiper-animate-delay="0s">
<img src="images/004.jpg" alt="">
</div>
<div
swiper-animate-effect="zoomIn"
swiper-animate-duration="1.5s"
swiper-animate-delay="1s" >
<div >
<img src="images/006.jpg" alt="">
</div>
<!--放文字的div 每张图片都要加时间 -->
<img src="images/009.jpg" alt=""
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="2.5s">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">

</div>
<!--小风车-->
<img src="" alt="" >
</div>
<!--第三屏-->
<div >
<div
swiper-animate-effect=" fadeInLeft"
swiper-animate-duration="1.5s"
swiper-animate-delay="0.5s" >
<img src="images/008.jpg" alt="">
</div>


<div
swiper-animate-effect=" fadeInRight"
swiper-animate-duration="2s"
swiper-animate-delay="2s" >
<img src="images/bike.jpg" alt="">
</div>

</div>
<div >
<div >
<img src="images/meinv1.jpg" alt="">
</div>
</div>
<div >Slide 5</div>
<div >Slide 6</div>
<div >Slide 7</div>
<div >Slide 8</div>
<div >Slide 9</div>
<div >Slide 10</div>
</div>
<!-- Add Pagination -->
<div ></div>
</div>
<!--音乐区域-->
<div id="music">
<!--<img src="images/music_gif" alt="" >-->
<img src="images/music4.jpg" alt="" >

<!--背景音乐-->
<!--<audio src="02.mp3" autoplay="autoplay"-->
<!--loop="loop" copy">制作人:行者</p>

<!--声明结束-->

<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/hd.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
</script>
</body>
</html>
//js部分=================================================================
// 必要的js代码
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}

});
// 结束js代码

// 音乐控制
var music=document.getElementById('music');
var music_bg=
document.getElementsByClassName('music_bg')[0];
var aud=music.getElementsByClassName('aud')[0];

// var music_gif=
// ducument.getElementsByClassName('music_gif')[0];

// 定义音乐的状态变量
var music_sta=1;
music.onclick=function(){
if (music_sta==1){
// 让背景gif隐藏
music_bg.style.display="none";
// 停止音乐图标的旋转
music_pic.style.animation='none';
// 停掉音乐
aud.pause();
music_sta=2;

}else if(music_sta==2){
music_bg.style.display='block';
music.bg.style.animation='music 2s linear infinite';
aud.play();
music_sta=1;

}
}
// 音乐控制结束
//css部分=====================================

/*自带的css*/
html, body {
position: relative;
height: 100%;
font-family: "微软雅黑";
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */

/*display: -webkit-box;*/
/*display: -ms-flexbox;*/
/*display: -webkit-flex;*/
/*display: flex;*/
/*-webkit-box-pack: center;*/
/*-ms-flex-pack: center;*/
/*-webkit-justify-content: center;*/
/*justify-content: center;*/
/*-webkit-box-align: center;*/
/*-ms-flex-align: center;*/
/*-webkit-align-items: center;*/
/*align-items: center;*/

}
/*自带的css结束*/

/*音乐*/
#music{

/*width: 60px;*/
/*height:60px;*/
/*border:2px solid blue;*/
position: fixed;
top:10px;
right:10px;
z-index: 9;

}
/*音符样式*/
#music .music_bg{
width:60px;
height: 60px;
position: absolute;
left:0;
top:0;
}



/*音乐图标样式*/
.music_pic{
display: block;
width:60px;
height:60px;
border-radius: 100%;
background-size: 5% 5%;
animation: music 2s linear infinite;

}
@keyframes music {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}

}
/*音乐控制结束*/

/*// 第一屏*/
.swiper-slide.one{
background:url("../images/003.jpg");
background-size:100% 100%;
}
.swiper-slide .top{
width:70%;
height:50%;
border:9px solid white;
margin:0 auto;
margin-top:10%;
overflow: hidden;
}
.swiper-slide .top img{
display: block;
width:100%;
height:100%;

}
.swiper-slide.one .bottom{
width:70%;
height:30%;
/*border:2px solid blue;*/
/*先用margin:0 auto 对其后再用margin-top不然不行*/
margin:0 auto;
margin-top:5%;
position: relative;

}
.swiper-slide.one .bottom .ring{
width:35%;
position: absolute;
left:5%;
top:0;
}
.swiper-slide.one .bottom .marry{
width:100%;
position: absolute;
top:42%;
left:0;
}
.swiper-slide.one .bottom .time{
width:50%;
position: absolute;
/*top:50px;*/
bottom:-15px;
left:50%;
transform: translateX(-50%);
}
p.copy{
position:fixed;
bottom:0px;
left:0px;
width:100%;
text-align: center;
color: #fff;
z-index: 99;
font-size: 6vw;
}
/*第一屏结束*/

/*第二屏*/
.swiper-slide.two{
background: url("../images/42.jpg");
background-size: 100% 100%;
position: relative;

}
.swiper-slide.two .left{
width:30%;
height:20%;
border:9px solid #00b0e0;
position: absolute;
left:5%;
top: 5%;
overflow: hidden;
z-index:10 ;

}
.swiper-slide.two .left img{
width:100%;
height:100%;
overflow: hidden;
}
.swiper-slide.two .right{
width: 60%;
height:80%;
/*border:9px solid red;*/
background:pink;
position: absolute;
right:5%;
top:10%;
}
.swiper-slide.two .right .top{
height:60%;
width:100%;
overflow: hidden;
margin-bottom:4%;
}
.swiper-slide.two .right .top img{
width: 100%;
}
/*right里面儿子辈的img标签*/
.swiper-slide.two .right> img{
width:100%;
float: left;
margin-top: 2%;
}
/*小风车*/
.swiper-slide.two .windmill{
position: absolute;
right:2%;
top:40%;
width:30%;

}
/*第二屏结束*/

/*第三屏*/
.swiper-slide.three {
width:100%;
height:100%;
background: url("../images/37.jpg");
position: relative;
}

.swiper-slide.three .top{
width: 100%;
height:60%;
/*border:2px solid red;*/
position: relative;
margin-top: 5%;
}
.swiper-slide.three .top img{
width:100%;
}
.swiper-slide.three .bottom{
width:90%;
height:40%;
/*border:4px solid blue ;*/
position: absolute;
top:51%;
left:5%;
overflow: hidden;
}
.swiper-slide.three .bottom img{
display: block;
width:100%;
height:100%;
/*position: absolute;*/
z-index:10;

}

/*第四屏开始*/
.swiper.slide.four {
width:100%;
height:100%;
background: url("/images/019.jpg");
position: relative;
}
.swiper.slide.four .left{
width:40%;
height:40%;
margin-top: 10%;
position: relative;
}
.swiper.slide.four .left img{
width:100%;
z-index:10;
position: absolute;
left:30%;
top:40%;
}