关于帧动画的设置，上个问题中老师好像理解错我的意思了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <header class="header"> <div class="header__logo">H5实战页面</div> <div 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" id="btn">即课学习</a> </div> </header> <!--第一屏--> <div class="screen-1"> <div class="wrap"> <h2 class="screen-1__heading">实战课程重磅上线</h2> <h3 class="screen-1__subheading">一键云学习，还在等待什么？</h3> </div> </div> <!--第二屏--> <div class="screen-2"> <div class="wrap"> <h2 class="screen-2__heading">每门课都是真是商业案例</h2> <h3 class="screen-2__subheading">真实案例，真实场景，在实践中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发流程一一为你呈现</h3> <div class="screen-2-pic"></div> <div class="screen-2-pic-1"></div> </div> </div> <!--第三屏--> <div class="screen-3"> <div class="wrap"> <div class="screen-3-pic"></div> <h2 class="screen-3__heading">强大的语言课程体系支持</h2> <h3 class="screen-3__subheading ">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br>,让你体验开发全流程</h3> <div class="screen-3-items"> <div class="screen-3-item screen-3-item-html5">HTML5</div> <div class="screen-3-item screen-3-item-PHP">PHP</div> <div class="screen-3-item screen-3-item-JAVA">JAVA</div> <div class="screen-3-item screen-3-item-Python">Python</div> <div class="screen-3-item screen-3-item-Node-js">Node.js</div> </div> </div> </div> <!--第四屏--> <div class="screen-4"> <div class="wrap"> <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2> <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3> <div class="screen-4__type"> <div class="screen-4__type__item screen-4__type__item_i_1"> <div class="screen-4__word">实战课程集成开发环境</div> </div> <div class="screen-4__type__item screen-4__type__item_i_2"> <div class="screen-4__word">内置终端命令</div> </div> <div class="screen-4__type__item screen-4__type__item_i_3"> <div class="screen-4__word">编译你的应用程序</div> </div> <div class="screen-4__type__item screen-4__type__item_i_4"> <div class="screen-4__word">通过云端服务输出效果</div> </div> </div> </div> </div> <!--第5屏--> <div class="screen-5"> <div class="wrap"> <h2 class="screen-5__heading">云端学习可以这样简单</h2> <h3 class="screen-5__subheading">看视频、敲代码，一气呵成，结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样</h3> <div class="screen-5-pic"></div> </div> </div> <!--第6屏--> <div class="screen-6"> <div class="wrap"> <div class="screen-6__button" id="screen-6__button">继续了解学习体验</div> </div> </div> <footer class="footer"> <div class="daohang"> 网站首页 人才招聘 联系我们 高校联盟 关于我们 讲师招募 意见反馈 友情链接</div> <div class="banquan"> Copyrught © 2015 imooc.com All Rights REserved | 京ICP备 13046642号-2</div> </footer> <!--大纲--> <div class="outline"> <a href="javascript:;" class="outline__item outline__item_status_active">实战课程</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> <script src="js/index.js"></script> </body> </html>
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.wrap{
width:1200px;
margin:0 auto;
height: auto;
}
/*头部区域*/
.header{
width: 100%;
height: 60px;
position: relative;
float: left;
animation: headerAnimate 1s ease-in-out forwards;
}
.header__logo{
width: 150px;
height: 40px;
line-height: 40px;
background: url(../img/logo.png) no-repeat left center;
background-size: 40px 40px ;
text-indent: 50px;
color:#fff;
position: absolute;
top:50%;
margin-top:-20px;
left:9px;
}
/*鼠标经过logo区的变化*/
.header__logo:hover{
cursor: pointer;
}
.header__nav{
position: absolute;
right: 30px;
height: 40px;
position: absolute;
top:50%;
margin-top:-20px;
}
.header__nav-item{
display: block;
color: #fff;
float: left;
font-size: 14px;
height: 40px;
line-height: 40px;
margin-left: 40px;
position: relative;
text-align: center;
}
.header__nav-item:hover{
color: red;
}
.header__nav-item_status_active{
color:red;
}
.header__nav-item_status_active::after{
content: " ";
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
left:0;
bottom: 0;
}
.header__nav-item_custom_button{
width: 96px;
height: 40px;
background: #f01400;
color:#fff;
border-radius: 5px;
}
/*第一屏*/
.screen-1{
background: url(../img/sc1.jpg) no-repeat center;
height: 640px;
background-size: cover;
padding-top:60px;
}
.screen-1__heading{
color:#fff;
padding-top:240px;
text-align: center;
font-size: 40px;
}
.screen-1__subheading{
color: #fff;
font-weight: normal;
text-align: center;
font-size: 14px;
padding-top:27px;
}
/*第二屏*/
.screen-2{
height: 640px;
background:url(../img/sc2.png) no-repeat bottom;
position: relative;
}
.screen-2__heading{
font-size: 40px;
padding-top:90px;
text-align: center;
}
.screen-2__heading::after{
content: " ";
display: block;
width:50px;
height: 2px;
background: #f01400;
position: absolute;
top:167px;
left: 50%;
margin-left: -25px;
}
.screen-2__subheading{
font-size: 14px;
height: 14px;
text-align: center;
padding-top: 64px;
}
.screen-2-pic{
background: url(../img/sc2-1.png) no-repeat;
width: 275px;
height: 380px;
position: absolute;
left:50%;
margin-left: -137.5px;
top:260px;
z-index: 2;
}
.screen-2-pic-1{
width: 266px;
height: 205px;
background: url(../img/sc2-2.png) no-repeat;
position: absolute;
top:335px;
left:50%;
margin-left: -40px;
z-index: 1;
animation: plane 1s ease 3s ;
}
/*第三屏*/
.screen-3{
height: 640px;
background: #2b333b;
position: relative;
}
.screen-3-pic{
background: url(../img/sc3.png) no-repeat center center;
background-size: 408px 440px;
width:408px;
height: 440px;
position: absolute;
top:50%;
margin-top: -220px;
margin-left: 20px;
}
.screen-3__heading{
color: #fff;
font-size: 35px;
text-align: right;
padding-top:230px;
padding-right: 125px;
}
.screen-3__heading::after{
content: " ";
display: block;
width:50px;
height: 2px;
background: #f01400;
position: absolute;
top:300px;
left: 50%;
margin-left: 90px;
}
.screen-3__subheading{
font-weight: normal;
font-size: 16px;
color:#fff;
height: 16px;
line-height: 24px;
padding-top:60px;
padding-left: 685px;
}
.screen-3-items{
width:583px;
height: 67px;
margin-top:170px;
margin-left:600px;
}
.screen-3-item{
float: left;
width: 67px;
height: 67px;
line-height: 67px;
text-align: center;
font-size: 12px;
margin-left: 38px;
border-radius: 50%;
}
.screen-3-item-html5{
border: 4px solid #1f5975;
color: #02a4ce;
}
.screen-3-item-PHP{
border: 4px solid #424d76;
color: #7872b4;
}
.screen-3-item-JAVA{
border: 4px solid #6b4146;
color: #ff6060;
}
.screen-3-item-Python{
border: 4px solid #29535f;
color: #22abc1;
}
.screen-3-item-Node-js{
border: 4px solid #3e4e40;
color: #66b056;
}
/*第4屏*/
.screen-4{
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-4__heading{
color:#07111b;
font-size: 40px;
line-height: 40px;
text-align: center;
padding-top:90px;
}
.screen-4__subheading{
color: #07111b;
font-size: 14px;
text-align: center;
padding-top:64px;
}
.screen-4__heading::after{
content: " ";
display: block;
width:50px;
height: 2px;
background: #f01400;
position: absolute;
top:167px;
left: 50%;
margin-left: -25px;
}
.screen-4__type{
width: 1200px;
height: 120px;
position: absolute;
top:290px;
margin-left: 20px;
}
.screen-4__type__item{
width: 160px;
margin-right: 170px;
height: 80px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type__item_i_1{
background: url(../img/sc4-1.png) no-repeat center top;
}
.screen-4__type__item_i_2{
background: url(../img/sc4-2.png) no-repeat center top;
}
.screen-4__type__item_i_3{
background: url(../img/sc4-3.png) no-repeat center top;
}
.screen-4__type__item_i_4{
background: url(../img/sc4-4.png) no-repeat center top;
margin-right: 0;
}
.screen-4__word{
width: 100%;
height: 14px;
color:#2c3238;
font-size: 14px;
line-height: 14px;
position: absolute;
bottom: -30px;
text-align: center;
}
/*第5屏*/
.screen-5{
height: 640px;
background: url(../img/sc5.jpg) no-repeat;
background-size: cover;
position: relative;
}
.screen-5-pic{
width:200px;
height: 200px;
background: url(../img/sc5-1.png) no-repeat center center;
position: absolute;
top:102px;
left:50%;
margin-left: -100px;
}
.screen-5__heading{
font-size: 35px;
color: #fff;
text-align: center;
padding-top:365px;
}
.screen-5__heading::after{
content: " ";
display: block;
width:50px;
height: 2px;
background: #fff;
position: absolute;
top:435px;
left: 50%;
margin-left: -25px;
}
.screen-5__subheading{
color:#fff;
padding-top:65px;
font-size: 14px;
font-weight: normal;
text-align: center;
}
/*第6屏*/
.screen-6{
height: 200px;
background: #fff;
position: relative;
}
.screen-6__button{
width:240px;
height: 60px;
line-height: 60px;
color:#14191e;
text-align: center;
border:2px solid #707070;
border-radius: 2px;
position: absolute;
top:50%;
margin-top:-30px;
left:50%;
margin-left:-120px;
cursor: pointer;
border-radius: 3px;
}
.screen-6__button:hover{
color:red;
}
/*脚步*/
.footer{
height:106px;
background: #000;
color:#c8cdd2;
text-align: center;
}
.daohang{
padding-top: 34px;
font-size: 14px;
}
.banquan{
font-size: 16px;
color: #787d82;
padding-top:15px;
}
/*固定导航栏样式*/
.header{
transition: all 1s;
}
.header_status_back{
position: fixed;
background: rgba(255,255,255,.5);
top:0;
left: 0;
z-index: 3;
}
.header_status_back .header__nav-item,
.header_status_back .header__logo
{
color:#000;
}
.header_status_back .header__nav-item_custom_button{
color: #fff;
}
.header_status_back .header__nav-item_status_active
{
color:red;
}
.header_status_back .header__nav-item:hover{
color: red;
}
@keyframes headerAnimate{
0%{
transform: translateY(-400px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes plane{
0%{
transform: translateY(600px);
opacity: 0;
}
25%{
transform: translateY(-15px);
}
50%{
transform: translateY(10px);
opacity: 1;
}
75%{
transform: translateY(-5px);
}
100%{
transform: translateY(0px);
}
}
/*大纲视图*/
.outline{
position: fixed;
bottom: 120px;
right: 0;
background: #fff;
z-index: 3;
box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
padding: 5px 15px;
}
.outline__item{
display: block;
width: 50px;
height: 40px;
color: #aaa;
font-size: 12px;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #eee;
}
.outline__item:last-child{
border-bottom: none;
}
.outline__item_status_active{
color: red;
}
.outline{
transition: all 1s;
opacity: 0;
transform: translate(100%,0);
}
.outline_status_in{
opacity: 1;
transform: translate(0,0);
}
.outline_status_in .outline__item:hover{
color: red;
}//获取元素
var getElem=function(selector){
return document.querySelector(selector);
}
var getAllElem=function(selector){
return document.querySelectorAll(selector);
}
//获取元素样式
var getCls=function(element){
return element.getAttribute("class");
}
//设置元素样式
var setCls=function(element,cls){
return element.setAttribute("class",cls);
}
//为元素添加样式
var addCls=function(element,cls){
var baseCls=getCls(element);
if(baseCls.indexOf(cls)===-1){
setCls(element,baseCls+" "+cls);
}
}
//为元素删除样式
var delCls=function(element,cls){
var baseCls=getCls(element);
setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
}
//第一步 初始化样式
var screenAnimateElements={
".screen-1":[
".screen-1__heading",
".screen-1__subheading",
],
".screen-2":[
".screen-2__heading",
".screen-2__subheading",
".screen-2-pic",
],
".screen-3":[
".screen-3-pic",
".screen-3__heading",
".screen-3__subheading",
".screen-3-items",
],
".screen-4":[
".screen-4__heading",
".screen-4__subheading",
".screen-4__type__item_i_1",
".screen-4__type__item_i_1",
".screen-4__type__item_i_2",
".screen-4__type__item_i_3",
".screen-4__type__item_i_4",
],
".screen-5":[
".screen-5__heading",
".screen-5__subheading",
".screen-5-pic",
]
}
function setScreenAnimateInit(screenCls){
var screen=document.querySelector(screenCls);//获取类名为当前屏的元素
var animateElements=screenAnimateElements[screenCls];
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);//获取到数组中的元素
var basCls=element.getAttribute('class');//得到元素的类名
element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_init");//重新设置类名
}
}
//播放屏内的元素动画
function playScreenAnimateDone(screenCls){
var screen=document.querySelector(screenCls);//获取类名为当前屏的元素
var animateElements=screenAnimateElements[screenCls];
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var basCls=element.getAttribute("class");
element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_done");//重新设置类名
}
}
window.onload=function(){
for(k in screenAnimateElements){
setScreenAnimateInit(k);
}
}
//第2步，滚动到哪里，就播放动画
window.onscroll=function(){
var top=document.documentElement.scrollTop || document.body.scrollTop;
if(top>60){
addCls(getElem(".header"),'header_status_back');
addCls(getElem(".outline"),"outline_status_in");
}else{
delCls(getElem(".header"),'header_status_back');
delCls(getElem(".outline"),"outline_status_in");
}
if(top>1){
playScreenAnimateDone(".screen-1");
switchNavItemsActive(0);
}
if(top>640*1-100){
playScreenAnimateDone(".screen-2");
switchNavItemsActive(1);
}
if(top>640*2-100){
playScreenAnimateDone(".screen-3");
switchNavItemsActive(2);
}
if(top>640*3-100){
playScreenAnimateDone(".screen-4");
switchNavItemsActive(3);
}
if(top>640*4-100){
playScreenAnimateDone(".screen-5");
switchNavItemsActive(4);
}
}
//第3步：点击跳转导航栏
var index=0;
var navitems=getAllElem(".header__nav-item");
for(var i=0;i<navitems.length;i++){
navitems[i].setAttribute("data-id",i);
navitems[i].onclick=function(){
index=this.getAttribute("data-id");
document.documentElement.scrollTop=index*640;
}
}
//点击跳转，大纲
var outlineitems=getAllElem(".outline__item");
for(var i=0;i<outlineitems.length;i++){
outlineitems[i].setAttribute("data-id",i);
outlineitems[i].onclick=function(){
index=this.getAttribute("data-id");
document.documentElement.scrollTop=index*640;
}
}
//鼠标放在按钮上，按钮的变化
var btn=document.getElementById("btn");
btn.onmousemove=function(){
btn.style.backgroundColor="#c02c1f";
}
btn.onmouseout=function(){
btn.style.backgroundColor="#f01400";
}
//导航大纲联动
var switchNavItemsActive=function(idx){
for(var i=0;i<navitems.length;i++){
delCls(navitems[i],"header__nav-item_status_active");
}
addCls(navitems[idx],"header__nav-item_status_active");
for(var m=0;m<outlineitems.length;m++){
delCls(outlineitems[m],"outline__item_status_active");
}
addCls(outlineitems[idx],"outline__item_status_active");
}
//点击立即学习后跳到第一屏
var btn1=document.getElementById("screen-6__button");
btn1.onclick=function(){
document.documentElement.scrollTop=0;
}
老师，我的意思是说，我的第二屏的火箭和第三屏呼吸灯效果是用帧动画来做的，不是用类名改为_animate_done这种方法，所以怎样做才能让我的这个帧动画在滚动到第二屏的时候才起作用呢？？不是页面一加载就开始播放动画，我设置了延时也没有用。5
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星