第二屏图片动画不对，第三屏图片和左下方文字没效果
来源：5-6 作业题
哎呦啊狗蛋
2019-05-13 11:22:20
/*头部动画*/
.header__logo,
.header__nav,
.header_status_black{
transition: all 1s;
}
.header__logo_animate_init,
.header__nav_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.header__logo_animate_done,
.header__nav_animate_done{
transform:translate(0,0);
opacity:1;
}
/*screen-1动画*/
.screen-1__heading{
transition: all 1s;
}
.screen-1__subheading{
transition: all 1s .5s;
}
.screen-1__heading_animate_init,
.screen-1__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
/*第二屏动画*/
.screen-2__heading{
transition: all 1s;
}
.screen-2__line,
.screen-2__subheading,
.screen-2__pic2{
transition:all 1s .2s;
}
.screen-2__pic3{
transition:all 1s 1s;
}
.screen-2__heading_animate_init,
.screen-2__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-2__heading_animate_done,
.screen-2__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__line_animate_init,
.screen-2__pic2_animate_init{
opacity:0;
}
.screen-2__line_animate_done,
.screen-2__pic2_animate_done{
opacity:1;
}
.screen-2__pic3_animate_init{
transform: translate(-100%,0);
opacity:0;
}
.screen-2__pic3_animate_done{
transform: translate(0,0);
opacity:1;
-webkit-animation:tb 1s 1s;
}
@-webkit-keyframes tb{
0%{transform: translate(0,100%);}
60%{transform: translate(0,0);}
90%{transform: translate(0,5%);}
100%{transform: translate(0,0%);}
}
/*第三屏*/
.screen-3__heading{
transition: all 1s;
}
.screen-3__line,
.screen-3__subheading{
transition: all 1s .5s;
}
.screen-3__lang{
transition: all 1s 1s;
}
.screen-3__heading_animate_init,
.screen-3__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__heading_animate_done,
.screen-3__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-3__line_animate_init{
opacity:0;
}
.screen-3__line_animate_done{
opacity:1;
}
.screen-3__lang_animate_init{
transform: translate(0,100%);
opacity:0;
}
.screen-3__lang_animate_done{
-webkit-animation:tb 1s 1s;
}
/*第四屏*/
.screen-4__heading,
.screen-4__type-item1,
.screen-4__type-item2,
.screen-4__type-item3,
.screen-4__type-item4{
transition: all 1s;
}
.screen-4__line,
.screen-4__subheading{
transition: all 1s .5s;
}
.screen-4__heading_animate_init,
.screen-4__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-4__heading_animate_done,
.screen-4__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-4__line_animate_init{
opacity: 0;
}
.screen-4__line_animate_done{
opacity: 1;
}
.screen-4__type-item1_animate_init,
.screen-4__type-item2_animate_init,
.screen-4__type-item3_animate_init,
.screen-4__type-item4_animate_init{
transform: scale(0);
opacity:0;
}
.screen-4__type-item1_animate_done,
.screen-4__type-item2_animate_done,
.screen-4__type-item3_animate_done,
.screen-4__type-item4_animate_done{
transform: scale(1);
opacity:1;
}
/*第五屏*/
.screen-5__heading,
.screen-5__picture{
transition: all 1s;
}
.screen-5__line,
.screen-5__subheading{
transition: all 1s .5s;
}
.screen-5__picture_animate_init{
transform: scale(0);
opacity:0;
}
.screen-5__picture_animate_done{
transform: scale(1);
opacity:1;
}
.screen-5__heading_animate_init,
.screen-5__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-5__line_animate_init{
opacity: 0;
}
.screen-5__line_animate_done{
opacity: 1;
}
/*头部*/
header{
width: 100%;
height: 80px;
background-color: #224d62;
margin: 0 auto;
position: relative;
}
.header__logo{
width: 160px;
height: 60px;
line-height: 60px;
font-size: 20px;
text-indent: 50px;
color: #ffffff;
background: url(../img/logo.png) left center no-repeat;
background-size: 40px 40px;
position: absolute;
top: 10px;
left: 10px;
}
.header__nav{
position: absolute;
top: 50%;
margin-top: -20px;
right: 30px;
height: 40px;
line-height: 40px;
}
.header__nav-item{
height: 40px;
line-height: 40px;
color: #ffffff;
font-size: 15px;
padding-left: 40px;
display: block;
float: left;
}
.header__nav-item-button{
width: 96px;
height: 40px;
background-color: #f01400;
border-radius: 3px;
margin-left: 40px;
}
.header__nav-item:hover{
color: #f01400;
cursor:pointer;
}
/*第一屏*/
.screen-1{
width: 100%;
padding-top: 60px;
height: 637px;
background: url(../img/sc1.jpg) center no-repeat;
background-size: cover;
}
.screen-1__heading{
font-size: 42px;
text-align: center;
color: #fff;
padding-top: 240px;
}
.screen-1__subheading{
font-size: 15px;
text-align: center;
color: #fff;
padding-bottom: 310px;
}
/*第二屏*/
.screen-2{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-2__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-2__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-2__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
padding-top:
color: #07111b;
}
.screen-2__pic1{
width: 750px;
height: 365px;
background: url(../img/sc2.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -375px;
z-index: 1;
}
.screen-2__pic2{
width: 275px;
height: 380px;
background: url(../img/sc2-1.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -129px;
z-index: 3;
}
.screen-2__pic3{
width:266px;
height:205px;
background:url(../img/sc2-2.png);
position: absolute;
left:50%;
bottom:100px;
margin-left:-30px;
z-index: 2;
}
/*第三屏*/
.screen-3{
background:url(../img/sc3.png) #2b333b 125px center no-repeat;
background-size: 570px 620px;
height:640px;
}
.screen-3__wrap{
width:1200px;
height:640px;
margin:0 auto;
position:relative;
}
.screen-3__heading{
font-size:40px;
padding: 214px 0 0 670px;
color:#fff;
}
.screen-3__line{
width:50px;
height:3px;
background-color: #f00;
position: absolute;
top:290px;
left:670px;
}
.screen-3__subheading{
font-size: 15px;
padding: 60px 0 0 670px;
color:#fff;
}
.screen-3__lang{
height:70px;
position: absolute;
bottom:48px;
left:670px;
}
.screen-3__lang-item{
width:60px;
font-size:10px;
height:60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
float:left;
margin-right: 36px;
}
.screen-3__lang-item-1{
border:3px solid #1f5975;
color:#17b0ff;
}
.screen-3__lang-item-2{
border:3px solid #424d76;
color:#7888fd;
}
.screen-3__lang-item-3{
border:3px solid #6b4146;
color:#ff584c;
}
.screen-3__lang-item-4{
border:3px solid #29535f;
color:#24c7ca;
}
.screen-3__lang-item-5{
border:3px solid #3e4e40;
color:#90bd56;
}
/*第四屏*/
.screen-4{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-4__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-4__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-4__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
color: #07111b;
}
.screen-4__type{
width: 1200px;
height: 120px;
position: relative;
top: 90px;
margin-left: 200px;
}
.screen-4__type-item{
width: 180px;
height: 120px;
margin-right: 120px;
height: 120px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type-item-text{
width: 180px;
height: 20px;
line-height: 20px;
font: 20px;
color: #07111b;
position: absolute;
bottom: 0px;
}
.screen-4__type-item1{
background: url('../img/sc4-1.png') no-repeat center top;
}
.screen-4__type-item2{
background: url('../img/sc4-2.png') no-repeat center top;
}
.screen-4__type-item3{
background: url('../img/sc4-3.png') no-repeat center top;
}
.screen-4__type-item4{
background: url('../img/sc4-4.png') no-repeat center top;
}
/*第五屏*/
.screen-5{
height:640px;
background:url(../img/sc5.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.screen-5__picture{
width:200px;
height:200px;
background:url(../img/sc5-1.png);
position: absolute;
left:50%;
top:95px;
margin-left:-100px;
}
.screen-5__heading{
font-size:42px;
font-weight: bold;
text-align: center;
padding-top: 334px;
color:#fff;
}
.screen-5__line{
width:50px;
height:3px;
background-color: #fff;
position: absolute;
top:412px;
left:50%;
margin-left: -25px;
}
.screen-5__subheading{
height:20px;
line-height: 20px
font-size: 15px;
text-align: center;
padding-top:60px;
color:#fff;
}
/*第六屏*/
.screen-continue{
height:200px;
background-color: #fff;
position: relative;
}
.screen-continue__button{
color:#14191e;
width:240px;
height:60px;
line-height: 60px;
text-align: center;
border:1px solid #707070;
border-radius: 3px;
display: block;
position: absolute;
top:50%;
left:50%;
margin-top: -30px;
margin-left: -120px;
}
.screen-continue__button:hover{
color:#ffffff;
background-color: red;
}
/*页脚*/
.footer{
height:105px;
background:#000;
text-indent: center;
position: relative;
}
.footer__wrap{
width:660px;
height:45px;
position: absolute;
top:50%;
left:50%;
margin-top:-22.5px;
margin-left: -330px;
color:#ffffff;
}
.footer__wrap-top{
height:30px;
}
.footer__wrap-top-item{
margin-right: 30px;
display: inline-block;
height:20px;
line-height: 20px;
font-size:11px;
color:#ffffff;
}
.footer__wrap-bottom{
height:30px;
line-height: 30px
font-size:16px;
text-align: center;
}/*头部*/
header{
width: 100%;
height: 80px;
background-color: #224d62;
margin: 0 auto;
position: relative;
}
.header__logo{
width: 160px;
height: 60px;
line-height: 60px;
font-size: 20px;
text-indent: 50px;
color: #ffffff;
background: url(../img/logo.png) left center no-repeat;
background-size: 40px 40px;
position: absolute;
top: 10px;
left: 10px;
}
.header__nav{
position: absolute;
top: 50%;
margin-top: -20px;
right: 30px;
height: 40px;
line-height: 40px;
}
.header__nav-item{
height: 40px;
line-height: 40px;
color: #ffffff;
font-size: 15px;
padding-left: 40px;
display: block;
float: left;
}
.header__nav-item-button{
width: 96px;
height: 40px;
background-color: #f01400;
border-radius: 3px;
margin-left: 40px;
}
.header__nav-item:hover{
color: #f01400;
cursor:pointer;
}
/*第一屏*/
.screen-1{
width: 100%;
padding-top: 60px;
height: 637px;
background: url(../img/sc1.jpg) center no-repeat;
background-size: cover;
}
.screen-1__heading{
font-size: 42px;
text-align: center;
color: #fff;
padding-top: 240px;
}
.screen-1__subheading{
font-size: 15px;
text-align: center;
color: #fff;
padding-bottom: 310px;
}
/*第二屏*/
.screen-2{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-2__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-2__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-2__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
padding-top:
color: #07111b;
}
.screen-2__pic1{
width: 750px;
height: 365px;
background: url(../img/sc2.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -375px;
z-index: 1;
}
.screen-2__pic2{
width: 275px;
height: 380px;
background: url(../img/sc2-1.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -129px;
z-index: 3;
}
.screen-2__pic3{
width:266px;
height:205px;
background:url(../img/sc2-2.png);
position: absolute;
left:50%;
bottom:100px;
margin-left:-30px;
z-index: 2;
}
/*第三屏*/
.screen-3{
background:url(../img/sc3.png) #2b333b 125px center no-repeat;
background-size: 570px 620px;
height:640px;
}
.screen-3__wrap{
width:1200px;
height:640px;
margin:0 auto;
position:relative;
}
.screen-3__heading{
font-size:40px;
padding: 214px 0 0 670px;
color:#fff;
}
.screen-3__line{
width:50px;
height:3px;
background-color: #f00;
position: absolute;
top:290px;
left:670px;
}
.screen-3__subheading{
font-size: 15px;
padding: 60px 0 0 670px;
color:#fff;
}
.screen-3__lang{
height:70px;
position: absolute;
bottom:48px;
left:670px;
}
.screen-3__lang-item{
width:60px;
font-size:10px;
height:60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
float:left;
margin-right: 36px;
}
.screen-3__lang-item-1{
border:3px solid #1f5975;
color:#17b0ff;
}
.screen-3__lang-item-2{
border:3px solid #424d76;
color:#7888fd;
}
.screen-3__lang-item-3{
border:3px solid #6b4146;
color:#ff584c;
}
.screen-3__lang-item-4{
border:3px solid #29535f;
color:#24c7ca;
}
.screen-3__lang-item-5{
border:3px solid #3e4e40;
color:#90bd56;
}
/*第四屏*/
.screen-4{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-4__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-4__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-4__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
color: #07111b;
}
.screen-4__type{
width: 1200px;
height: 120px;
position: relative;
top: 90px;
margin-left: 200px;
}
.screen-4__type-item{
width: 180px;
height: 120px;
margin-right: 120px;
height: 120px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type-item-text{
width: 180px;
height: 20px;
line-height: 20px;
font: 20px;
color: #07111b;
position: absolute;
bottom: 0px;
}
.screen-4__type-item1{
background: url('../img/sc4-1.png') no-repeat center top;
}
.screen-4__type-item2{
background: url('../img/sc4-2.png') no-repeat center top;
}
.screen-4__type-item3{
background: url('../img/sc4-3.png') no-repeat center top;
}
.screen-4__type-item4{
background: url('../img/sc4-4.png') no-repeat center top;
}
/*第五屏*/
.screen-5{
height:640px;
background:url(../img/sc5.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.screen-5__picture{
width:200px;
height:200px;
background:url(../img/sc5-1.png);
position: absolute;
left:50%;
top:95px;
margin-left:-100px;
}
.screen-5__heading{
font-size:42px;
font-weight: bold;
text-align: center;
padding-top: 334px;
color:#fff;
}
.screen-5__line{
width:50px;
height:3px;
background-color: #fff;
position: absolute;
top:412px;
left:50%;
margin-left: -25px;
}
.screen-5__subheading{
height:20px;
line-height: 20px
font-size: 15px;
text-align: center;
padding-top:60px;
color:#fff;
}
/*第六屏*/
.screen-continue{
height:200px;
background-color: #fff;
position: relative;
}
.screen-continue__button{
color:#14191e;
width:240px;
height:60px;
line-height: 60px;
text-align: center;
border:1px solid #707070;
border-radius: 3px;
display: block;
position: absolute;
top:50%;
left:50%;
margin-top: -30px;
margin-left: -120px;
}
.screen-continue__button:hover{
color:#ffffff;
background-color: red;
}
/*页脚*/
.footer{
height:105px;
background:#000;
text-indent: center;
position: relative;
}
.footer__wrap{
width:660px;
height:45px;
position: absolute;
top:50%;
left:50%;
margin-top:-22.5px;
margin-left: -330px;
color:#ffffff;
}
.footer__wrap-top{
height:30px;
}
.footer__wrap-top-item{
margin-right: 30px;
display: inline-block;
height:20px;
line-height: 20px;
font-size:11px;
color:#ffffff;
}
.footer__wrap-bottom{
height:30px;
line-height: 30px
font-size:16px;
text-align: center;
}
/*头部*/
header{
width: 100%;
height: 80px;
background-color: #224d62;
margin: 0 auto;
position: relative;
}
.header__logo{
width: 160px;
height: 60px;
line-height: 60px;
font-size: 20px;
text-indent: 50px;
color: #ffffff;
background: url(../img/logo.png) left center no-repeat;
background-size: 40px 40px;
position: absolute;
top: 10px;
left: 10px;
}
.header__nav{
position: absolute;
top: 50%;
margin-top: -20px;
right: 30px;
height: 40px;
line-height: 40px;
}
.header__nav-item{
height: 40px;
line-height: 40px;
color: #ffffff;
font-size: 15px;
padding-left: 40px;
display: block;
float: left;
}
.header__nav-item-button{
width: 96px;
height: 40px;
background-color: #f01400;
border-radius: 3px;
margin-left: 40px;
}
.header__nav-item:hover{
color: #f01400;
cursor:pointer;
}
/*第一屏*/
.screen-1{
width: 100%;
padding-top: 60px;
height: 637px;
background: url(../img/sc1.jpg) center no-repeat;
background-size: cover;
}
.screen-1__heading{
font-size: 42px;
text-align: center;
color: #fff;
padding-top: 240px;
}
.screen-1__subheading{
font-size: 15px;
text-align: center;
color: #fff;
padding-bottom: 310px;
}
/*第二屏*/
.screen-2{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-2__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-2__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-2__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
padding-top:
color: #07111b;
}
.screen-2__pic1{
width: 750px;
height: 365px;
background: url(../img/sc2.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -375px;
z-index: 1;
}
.screen-2__pic2{
width: 275px;
height: 380px;
background: url(../img/sc2-1.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -129px;
z-index: 3;
}
.screen-2__pic3{
width:266px;
height:205px;
background:url(../img/sc2-2.png);
position: absolute;
left:50%;
bottom:100px;
margin-left:-30px;
z-index: 2;
}
/*第三屏*/
.screen-3{
background:url(../img/sc3.png) #2b333b 125px center no-repeat;
background-size: 570px 620px;
height:640px;
}
.screen-3__wrap{
width:1200px;
height:640px;
margin:0 auto;
position:relative;
}
.screen-3__heading{
font-size:40px;
padding: 214px 0 0 670px;
color:#fff;
}
.screen-3__line{
width:50px;
height:3px;
background-color: #f00;
position: absolute;
top:290px;
left:670px;
}
.screen-3__subheading{
font-size: 15px;
padding: 60px 0 0 670px;
color:#fff;
}
.screen-3__lang{
height:70px;
position: absolute;
bottom:48px;
left:670px;
}
.screen-3__lang-item{
width:60px;
font-size:10px;
height:60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
float:left;
margin-right: 36px;
}
.screen-3__lang-item-1{
border:3px solid #1f5975;
color:#17b0ff;
}
.screen-3__lang-item-2{
border:3px solid #424d76;
color:#7888fd;
}
.screen-3__lang-item-3{
border:3px solid #6b4146;
color:#ff584c;
}
.screen-3__lang-item-4{
border:3px solid #29535f;
color:#24c7ca;
}
.screen-3__lang-item-5{
border:3px solid #3e4e40;
color:#90bd56;
}
/*第四屏*/
.screen-4{
width: 100%;
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-4__heading{
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 90px;
color: #07111b;
}
.screen-4__line{
width: 50px;
height: 3px;
background-color: #ff0000;
position: absolute;
top: 167px;
left: 50%;
margin-left: -25px;
}
.screen-4__subheading{
font-size: 15px;
padding-top: 46px;
text-align: center;
color: #07111b;
}
.screen-4__type{
width: 1200px;
height: 120px;
position: relative;
top: 90px;
margin-left: 200px;
}
.screen-4__type-item{
width: 180px;
height: 120px;
margin-right: 120px;
height: 120px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type-item-text{
width: 180px;
height: 20px;
line-height: 20px;
font: 20px;
color: #07111b;
position: absolute;
bottom: 0px;
}
.screen-4__type-item1{
background: url('../img/sc4-1.png') no-repeat center top;
}
.screen-4__type-item2{
background: url('../img/sc4-2.png') no-repeat center top;
}
.screen-4__type-item3{
background: url('../img/sc4-3.png') no-repeat center top;
}
.screen-4__type-item4{
background: url('../img/sc4-4.png') no-repeat center top;
}
/*第五屏*/
.screen-5{
height:640px;
background:url(../img/sc5.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.screen-5__picture{
width:200px;
height:200px;
background:url(../img/sc5-1.png);
position: absolute;
left:50%;
top:95px;
margin-left:-100px;
}
.screen-5__heading{
font-size:42px;
font-weight: bold;
text-align: center;
padding-top: 334px;
color:#fff;
}
.screen-5__line{
width:50px;
height:3px;
background-color: #fff;
position: absolute;
top:412px;
left:50%;
margin-left: -25px;
}
.screen-5__subheading{
height:20px;
line-height: 20px
font-size: 15px;
text-align: center;
padding-top:60px;
color:#fff;
}
/*第六屏*/
.screen-continue{
height:200px;
background-color: #fff;
position: relative;
}
.screen-continue__button{
color:#14191e;
width:240px;
height:60px;
line-height: 60px;
text-align: center;
border:1px solid #707070;
border-radius: 3px;
display: block;
position: absolute;
top:50%;
left:50%;
margin-top: -30px;
margin-left: -120px;
}
.screen-continue__button:hover{
color:#ffffff;
background-color: red;
}
/*页脚*/
.footer{
height:105px;
background:#000;
text-indent: center;
position: relative;
}
.footer__wrap{
width:660px;
height:45px;
position: absolute;
top:50%;
left:50%;
margin-top:-22.5px;
margin-left: -330px;
color:#ffffff;
}
.footer__wrap-top{
height:30px;
}
.footer__wrap-top-item{
margin-right: 30px;
display: inline-block;
height:20px;
line-height: 20px;
font-size:11px;
color:#ffffff;
}
.footer__wrap-bottom{
height:30px;
line-height: 30px
font-size:16px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>宣传页项目</title>
<link rel="stylesheet" type="text/css" href="./css/base.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="stylesheet" type="text/css" href="./css/animate.css" />
</head>
<body>
<!--头部-->
<header>
<div class="header__logo">H5实战页面</div>
<nav class="header__nav">
<a href="#" class="header__nav-item">实战课程</a>
<a href="#" class="header__nav-item">商业案例</a>
<a href="#" class="header__nav-item">课程体系</a>
<a href="#" class="header__nav-item">集成环境</a>
<a href="#" class="header__nav-item">云端学习</a>
<a href="#" class="header__nav-item header__nav-item-button">即可学习</a>
</nav>
</header>
<!--第一屏-->
<div class="screen-1">
<div class="screen-1__heading">实战课程重磅上线</div>
<div class="screen-1__subheading">一键云学习，还在等待什么？</div>
</div>
<!--第二屏-->
<div class="screen-2">
<div class="screen-2__heading">每一门课都是真实商业案例</div>
<div class="screen-2__line"></div>
<div class="screen-2__subheading">真实案例，真实场景，在实站中实践、操作、调试<br>
大牛带你体验BAT真实开发流程，所有开发过程为你一一呈现。</div>
<div class="screen-2__pic1"></div>
<div class="screen-2__pic2"></div>
<div class="screen-2__pic3"></div>
</div>
<!--第三屏-->
<div class="screen-3">
<div class="screen-3__wrap">
<div class="screen-3__heading">强大的语言课程体系支持</div>
<div class="screen-3__line"></div>
<div class="screen-3__subheading">学习环境与课程轻松对接，安调、调试、写入、部署、运行，一站式解决<br>，让你体验开发全流程</div>
<div class="screen-3__lang screen-3__heading_animate_done">
<div class="screen-3__lang-item screen-3__lang-item-1">HTMLS</div>
<div class="screen-3__lang-item screen-3__lang-item-2">PHP</div>
<div class="screen-3__lang-item screen-3__lang-item-3">JAVA</div>
<div class="screen-3__lang-item screen-3__lang-item-4">Python</div>
<div class="screen-3__lang-item screen-3__lang-item-5">Node.js</div>
</div><!--end-lang-->
</div><!--end-wrap-->
</div>
<!--第四屏-->
<div class="screen-4">
<div class="screen-4__heading">省去本地复杂的环境搭建</div>
<div class="screen-4__line"></div>
<div class="screen-4__subheading">你可以告别在虚拟机中调试开发了</div>
<div class="screen-4__type">
<div class="screen-4__type-item screen-4__type-item1">
<div class="screen-4__type-item-text">实战课程集成开发环境</div>
</div>
<div class="screen-4__type-item screen-4__type-item2">
<div class="screen-4__type-item-text">内置终端命令行</div>
</div>
<div class="screen-4__type-item screen-4__type-item3">
<div class="screen-4__type-item-text">编译你的应用程序</div>
</div>
<div class="screen-4__type-item screen-4__type-item4">
<div class="screen-4__type-item-text">通过云端服务输出结果</div>
</div>
</div>
</div>
<!--第五屏-->
<div class='screen-5'>
<div class='screen-5__heading'>云端学习可以这样简单</div>
<div class='screen-5__line'></div>
<div class='screen-5__subheading'>看视频，敲代码一气呵成。结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样。</div>
<div class='screen-5__picture'></div>
</div>
<!--第六屏-->
<div class="screen-continue">
<a class="screen-continue__button" href="#">继续了解学习体验</a>
</div>
<!--页脚-->
<footer class="footer">
<div class='footer__wrap'>
<div class='footer__wrap-top'>
<a class='footer__wrap-top-item' href="#">网站首页</a>
<a class='footer__wrap-top-item' href="#">人才招聘</a>
<a class='footer__wrap-top-item' href="#">联系我们</a>
<a class='footer__wrap-top-item' href="#">高校联盟</a>
<a class='footer__wrap-top-item' href="#">关于我们</a>
<a class='footer__wrap-top-item' href="#">讲师招募</a>
<a class='footer__wrap-top-item' href="#">意见反馈</a>
<a class='footer__wrap-top-item' href="#">友情链接</a>
</div>
<div class='footer__wrap-bottom'>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
</div>
</footer>
</body>
</html>
1回答
-
好帮手慕慕子
2019-05-13
同学你好，请问你是想问第二屏小火箭的动画如何实现吗， 如果是指这里的话， 老师这里给你提供一个思路， 供你参考：先使用定位将火箭隐藏在底部， 然后通过动画设置bottom值让火箭在由从上到下出现，并实现一个弹簧的效果，例
第三屏图片可以采用scale属性实现， 文字的地方，可以先隐藏文字， 然后在显示出来。
若同学不是指的这里的话，可以详细的描述下，指的是哪里，再次提问，老师会继续为你解答哦
另， 建议： 可以以作业的形式提交作业， 会有老师针对你的代码指出问题所在， 给出详细的修改建议， 并将这些修改建议整理成文档提供给同学查看哦~
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题