老师，帮我看下错在哪里了

老师，帮我看下错在哪里了

老师，第一屏和第二屏动画都不对，能帮忙看下哪里错了吗


html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<!--导航条区域-->
<header class="header">
    <div class="header__wrap">
        <div class="header__logo">H5实战页面</div>
        <nav class="header__nav">
            <a href="javascript:;" class="header__nav-item  header__nav-item_status_active">实战课程</a>
            <a href="javascript:;" class="header__nav-item">商业案例</a>
            <a href="javascript:;" class="header__nav-item">课程体系</a>
            <a href="javascript:;" class="header__nav-item">集成环境</a>
            <a href="javascript:;" class="header__nav-item">云端学习</a>
            <a href="javascript:;" class="header__nav-item  header__nav-item_custom_button">即刻学习</a>
            <div class="header__nav-tip"></div>
        </nav>
    </div>
</header>
<div class="screen-1">
        <h2 class="screen-1__heading  screen-1__heading_animate_init">实战课程重磅上线</h2>
        <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习，还在等什么？</h3>
    </div>
    <div class="screen-2">
        <h2 class="screen-2__heading">每门课都是真实商业案例</h2>
        <h3 class="screen-2__subheading">真实案例、真实场景，在实战中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发过程——为你呈现</h3>
        <div class="screen-2__BAT">
         <div class="screen-2__point1"></div>
            <div class="screen-2__point2"></div>
        </div>
    </div>
    <div class="screen-3">
     <div class="screen-3__bg screen-3__bg_animate_init"></div>
        <div class="screen-3__wrap">
            <h2 class="screen-3__heading screen-3__heading_animate_init">强大的语言课程体系支持</h2>
            <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运营，一站式解决<br> 让你体验开发全流程</h3>
            <div class="screen-3__features">
                <div class="screen-3__features__item  screen-3__features__item1">
                    <div class="screen-3__features__item__number">HTML5</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item2">
                    <div class="screen-3__features__item__number">PHP</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item3">
                    <div class="screen-3__features__item__number">JAVA</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item4">
                    <div class="screen-3__features__item__number">Python</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item5">
                    <div class="screen-3__features__item__number">Node.js</div>
                </div>
            </div>
        </div>
    </div>
    <div class="screen-4">
        <div class="screen-4__wrap">
            <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2>
            <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
            <div class="screen-4__type">
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img1"></div>
                    <div class="screen-4__type__item__txt">实战课程集成开发环境</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img2"></div>
                    <div class="screen-4__type__item__txt">内置终端命令行</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img3"></div>
                    <div class="screen-4__type__item__txt">编译你的应用程序</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img4"></div>
                    <div class="screen-4__type__item__txt">通过云端服务输出效果</div>
                </div>
            </div>
        </div>
    </div>
    <div class="screen-5">
     <div class="screen-5__pic"></div>
        <h2 class="screen-5__heading">云端学习可以这样简单</h2>
        <h3 class="screen-5__subheading">看视频，敲代码一气呵成，结合慕课网为您提供的云端学习工具，所见即所得。从此学习不一样</h3>
    </div>
    <div class="screen-learn">
     <a class="screen-learn-button" href="javascript:;">继续了解学习体验</a>
    </div>
    <footer class="footer">
     <ul class="footer__nav">
     <li class="footer__nav__item">网站首页</li>
     <li class="footer__nav__item">人才招聘</li>
     <li class="footer__nav__item">联系我们</li>
     <li class="footer__nav__item">高校联盟</li>
     <li class="footer__nav__item">关于我们</li>
     <li class="footer__nav__item">讲师招聘</li>
     <li class="footer__nav__item">意见反馈</li>
     <li class="footer__nav__item">友情链接</li>
     </ul>
     <p>© 2015 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
    </footer>
    <div class="outline">
        <a href="javascript:;" class="outline__item">实</a>
        <a href="javascript:;" class="outline__item">商</a>
        <a href="javascript:;" class="outline__item">课</a>
        <a href="javascript:;" class="outline__item">集</a>
        <a href="javascript:;" class="outline__item">云</a>
    </div>  
</body>
</html>

animate.css部分

.screen-1__heading,
.screen-1__subheading{
	transition: all 1s;
}
.screen-1__subheading{
	transition-delay:1s;
}
.screen-1__heading_animate_init,
.screen-1__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}

/*第二屏动画*/
.screen-2__heading,
.screen-2__subheading,
.screen-2__point1{
	transition: all 1s;
}
.screen-2__heading_animate_init,
.screen-2__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-2__heading_animate_done,
.screen-2__subheading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}
.screen-2__point2_animate_init{
	opacity: 0;
}
.screen-2__point2_animate_done{
	opacity: 1;
}

index.css部分

/*头部*/
.header__wrap{
	width:1200px;
	height: 40px;
	margin: 10px auto;
	position: relative;
	z-index: 3;
}
.header__logo{
	width: 150px;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	color: #fff;
	text-indent: 50px;
	background: url('../img/logo.png') left center no-repeat;
	background-size: 38px 38px;
	font-weight: bold;
	margin-left: -65px;
}
.header__nav{
	position: absolute;
	right: -70px;
	height: 38px;
	top: 50%;
	margin-top: -19px;
}
.header__nav-item{
	color: #fff;
	font-size: 14px;
	display: block;
	height: 40px;
	line-height: 40px;
	float: left;
	position: relative;
	width: 60px;
	text-align: center;
	margin: 0 20px;
}
.header__nav-item:hover{
	font-weight: bold;
}
.header__nav-item_status_active{
	font-weight: bold;
}
.header__nav-item_status_active::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	background-color:#f01400; 
	left: 0;
	bottom: 0;
}
.header__nav-item_custom_button{
	background: red;
	text-align: center;
	width: 85px;
	border-radius: 5px;
	padding: 0;
}

/*第一屏*/
.screen-1{
	height: 640px;
	overflow: hidden;
	background:url(../img/sc1.jpg) no-repeat center;
	background-size: cover;
	margin: 0 auto;
	margin-top: -60px;
}
.screen-1__heading{
	color: #fff;
	text-align: center;
	font-size: 30px;
	margin-top: 240px;
}
.screen-1__subheading{
	color: #fff;
	text-align: center;
	font-weight: normal;
}

/*第二屏*/
.screen-2{
	height: 640px;
	position: relative;
	overflow: hidden;
	background-color: #f3f5f7;
	margin: 0 auto;
}
.screen-2__heading{
	font-size:36px;
	line-height: 36px;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding-top: 90px;
}
.screen-2__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    top: 167px;
    left: 50%;
    margin-left: -20px;
}
.screen-2__subheading{
	font-size:14px;
	color: #000;
	text-align: center;
	padding-top: 35px;
	line-height: 18px;
	position: absolute;
    left: 50%;
    margin-left: -189px;
    top: 165px;
}
.screen-2__BAT{
	width: 750px;
	height: 361px;
	background:url(../img/sc2.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -375px;
}
.screen-2__point1{
    width: 266px;
    height: 205px;
    background: url(../img/sc2-2.png) no-repeat center;
    position: absolute;
    left: 340px;
    top: 400px;
}
.screen-2__point2{
    width: 275px;
    height: 380px;
    background: url(../img/sc2-1.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -137px;
    bottom: 0;
}

/*第三屏*/
.screen-3{
	height: 640px;
	position: relative;
	overflow: hidden;
	background-color: #2b333b;
	margin: 0 auto;
}
.screen-3__bg{
    width: 580px;
    height: 640px;
    background: url(../img/sc3.png) no-repeat center;
    float: left;
    margin-left: 50px;
    background-size: cover;
}
.screen-3__heading{
    font-size: 36px;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 700px;
    top: 200px;
}
.screen-3__heading::after{
	content: ' ';
	display: block;
	width: 40px;
	height: 2px;
	position: absolute;
	background-color: #f01400; 
    top: 80px;
    left: 5px;
}
.screen-3__subheading{
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 700px;
    top: 320px;
}
.screen-3__features{
	width: 600px;
	height: 80px;
	position: absolute;
	left: 700px;
    top: 500px; 
}
.screen-3__features__item{
    width:60px;
    height:60px;
    border-radius:100px;
    float: left;
    margin-right: 30px;
}
.screen-3__features__item1{
	border:6px solid rgba(2,176,255,.5);
}
.screen-3__features__item2{
	border:6px solid rgba(79,125,253,.5);
}
.screen-3__features__item3{
	border:6px solid rgba(255,96,96,.5);
}
.screen-3__features__item4{
	border:6px solid rgba(34,199,229,.5);
}
.screen-3__features__item5{
	border:6px solid rgba(144,189,86,.5);
}
.screen-3__features__item:nth-child(1){
	color: rgba(2,176,255);
}
.screen-3__features__item:nth-child(2){
	color: rgba(79,125,253);
}
.screen-3__features__item:nth-child(3){
	color: rgba(255,96,96);
}
.screen-3__features__item:nth-child(4){
	color: rgba(34,199,229);
}
.screen-3__features__item:nth-child(5){
	color: rgba(144,189,86);
}
.screen-3__features__item__number{
	line-height: 60px;
	text-align: center; 
}

/*第四屏*/
.screen-4{
	background-color: #f3f5f7;
	height: 640px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
.screen-4__wrap{
	width: 1200px;
	height: auto;
	margin: 0 auto;

}
.screen-4__heading{
	font-size: 36px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding-top: 120px;
}
.screen-4__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    top: 187px;
    left: 50%;
    margin-left: -20px;
}
.screen-4__subheading{
    font-size: 14px;
    color: #000;
    padding-top: 35px;
    line-height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -109px;
    top: 185px;
}
.screen-4__type{
	width: 1065px;
	height: 120px;
	position: absolute;
	top: 354px;
	left: 25%;
}
.screen-4__type__item{
	width: 170px;
	height: 123px;
	float: left;
}
.screen-4__type__item_img{
	width: 80px;
	height: 97px;
	margin: 0 auto;
}
.screen-4__type__item_img1{

	background: url('../img/sc4-1.png') no-repeat left top;
}
.screen-4__type__item_img2{

	background: url('../img/sc4-2.png') no-repeat left top;
}
.screen-4__type__item_img3{

	background: url('../img/sc4-3.png') no-repeat left top;
}
.screen-4__type__item_img4{

	background: url('../img/sc4-4.png') no-repeat left top;
}
.screen-4__type__item__txt{
	text-align: center;
}

/*第五屏*/
.screen-5{
    height: 640px;
    position: relative;
    overflow: hidden;
    background: url('../img/sc5.jpg') no-repeat center;
    margin: 0 auto;
}
.screen-5__pic{
	width: 200px;
	height: 200px;
	background: url('../img/sc5-1.png')  no-repeat center;
	margin: 100px auto 0;
}
.screen-5__heading{
    font-size: 36px;
    line-height: 36px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
}
.screen-5__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #fff;
    top: 430px;
    left: 50%;
    margin-left: -20px;
}
.screen-5__subheading{
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding-top: 65px;
}

/*第六屏*/
.screen-learn{
	height: 200px;
	margin: 0 auto;
	position: relative;
}
.screen-learn-button{
	border:1px solid rgba(112,112,112,.5);
	font-size: 20px;
    color: #000;
    padding: 20px 30px;
    position: absolute;
	top: 67px;
    left: 50%;
    margin-left: -117px;
    border-radius: 5px;
}
.screen-learn-button:hover{
	background-color: red;
	color: #fff;
	border: none;
}

/*尾部*/
.footer{
	height: 100px;
	background-color: #000;
	position: relative;
	margin: 0 auto;
}
.footer__nav{
	width: 670px;
	height: 30px;
	position: absolute;
    top: 18px;
    left: 50%;
    margin-left: -355px;
}
.footer__nav__item{
	color: #fff;
	float: left;
	margin-right: 35px;
}
.footer__nav__item:hover{
	color: red;
	cursor: pointer; 
}
.footer p{
    color: #c8cdd2;
    font-size: 16px;
	position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -236px;
}

/*侧边条*/
.outline {
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
    z-index: 3;
}
.outline__item {
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    padding: 5px 0;
    background: rgb(255,255,255);
    margin: 5px 0px 0px;
    border-top: 1px solid #eee;
    text-align: center;
    color: #93999f;
}
.outline__item:first-child{
    border:none;
}
.outline__item:hover,
.outline__item_status_active{
    color: #f00;
}

base.css部分

body{
	background-color: #fff; 
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: "Microsoft Yahei",微软雅黑
}
a{
	text-decoration: none;
}
h2,h3{
	margin: 0;
	padding: 0;
	font-weight: normal;
}
ul,li{
	list-style: none;
}
p{
	margin: 0;
	padding: 0;
}
Perfect雪儿 2019-08-05
源自：宣传页项目   5-6 作业题
1
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕星星 2019-08-06 13:45:24

在火狐浏览器中测试目前第二屏就是显示完成的状态：

http://img1.sycdn.imooc.com//climg/5d4912dd000179ca06430310.jpg

没有动画的过程。如果添加上js之后（按照视频中添加），就会有不透明到透明的过程，这是因为在js中是文档加载完成之后，通过for循环添加的初始化动画：

http://img1.sycdn.imooc.com//climg/5d4913930001e44304590324.jpg

这样就会有一个显示到隐藏的过程，页面滚动的时候就会有隐藏到显示的过程。如果不想要前面的过程，可以和第一屏一样，在标签中添加上init类，这样直接就是隐藏的，页面滚动的时候再显示。

自己可以测试下。

0
收起回答
  • 提问者 Perfect雪儿 #1
    老师，我滚动了，也是下了个火狐浏览器，但是元素没有出来
    2019-08-06 14:52:28
  • 好帮手慕星星 回复 提问者 Perfect雪儿 #2
    建议将修改后的HTML和js代码全部粘贴上来，老师帮助你测试下。
    2019-08-06 15:43:22
  • 提问者 Perfect雪儿 回复 好帮手慕星星 #3
    代码太多了粘贴不了，有没有其他方式联系你呢
    2019-08-06 17:41:15
点开查看后面3条评论
好帮手慕星星 2019-08-06 10:40:36

你好，没有动画是正常的，因为在宣传页项目源码中，老师在js中封装了动画完成的方法，第一屏动画是在定时器中调用的，如下：

http://img1.sycdn.imooc.com//climg/5d48e8230001160a10390350.jpg

页面打开100毫秒之后调用方法，执行动画。

而第二屏以及以下的动画是在滚动事件中执行的。如果忘记了是怎么写的，可以再回顾下视频或者看一下项目源码哦：

http://img1.sycdn.imooc.com//climg/5d48e89d00010a9712500615.jpg

祝学习愉快！

0
收起回答
  • 提问者 Perfect雪儿 #1
    好的知道了，想老师帮忙看下，为什么第二屏中效果是文字从上往下，而且是由不透明变为透明，和写的代码相反
    2019-08-06 10:56:16
好帮手慕星星 2019-08-06 10:17:02

同学你好，代码没有问题。

是因为animate.css动画中过渡用了all的原因：

http://img1.sycdn.imooc.com//climg/5d48e2d700019f8804600481.jpg

Chrome浏览器会计算到所有属性，所以使用all会有问题。建议使用火狐浏览器进行测试，看看效果是否正确。

祝学习愉快！

0
收起回答
  • 提问者 Perfect雪儿 #1
    老师，刚试了下，火狐的话第一屏的元素都不见了，而且第一屏和第二屏没有任何动画，该怎么修改呢？
    2019-08-06 10:26:19
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师帮我看下问题出在哪里
5 0 4
麻烦老师看看哪里出错了
0 0 5
老师看这里！我的URL错在哪里了？为什么会报错？
32 0 6
老师看下我哪里错了
3 0 5
老师帮看看是哪里出错了
14 0 2

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师