关于第二屏火箭问题，全部代码都粘贴了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画作业</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/newanimate.css"> </head> <body> <!-- 第一屏 --> <div class="screen-1"> <!-- 导航 --> <header class="header header_animate_init"> <a href="javascript:;" class="header__logo">H5实战页面</a> <nav class="header__nav"> <a href="javascript:;" class="header__nav-item header__nav-item_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_button">即刻学习</a> <div class="header__nav-tip"></div> </nav> </header> <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> <div class="screen-2__lines lines"></div> <h3 class="screen-2__subheading">真实案例，真实场景，在实战中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h3> <div class="screen-2__people"></div> <div class="screen-2__rocket"></div> </div> <!-- 第三屏 --> <div class="screen-3"> <div class="screen-3__wrap"> <div class="screen-3__left"></div> <div class="screen-3__right"> <h2 class="screen-3__heading">强大的语言课程体系支持</h2> <div class="screen-3__lines lines"></div> <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br>，让你体验开发全流程</h3> <div class="screen-3__tapy"> <span class="screen-3__tapy_item screen-3__tapy_item-1">HTML5</span> <span class="screen-3__tapy_item screen-3__tapy_item-2">PHP</span> <span class="screen-3__tapy_item screen-3__tapy_item-3">JAVA</span> <span class="screen-3__tapy_item screen-3__tapy_item-4">Python</span> <span class="screen-3__tapy_item screen-3__tapy_item-5">Node.js</span> </div> </div> </div> </div> <!-- 第四屏 --> <div class="screen-4"> <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2> <div class="screen-4__lines lines"></div> <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3> <div class="screen-4__features"> <div class="screen-4__features_item screen-4__features_item-1">实战课程集成开发环境</div> <div class="screen-4__features_item screen-4__features_item-2">内置终端命令行为</div> <div class="screen-4__features_item screen-4__features_item-3">编译你的应用程序</div> <div class="screen-4__features_item screen-4__features_item-4">通过云端服务输出效果</div> </div> </div> <!-- 第五屏 --> <div class="screen-5"> <div class="screen-5__img"></div> <h2 class="screen-5__heading">云端学习可以这样简单</h2> <div class="screen-5__lines lines"></div> <h3 class="screen-5__subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h3> </div> <!-- 第六屏按钮 --> <div class="screen-6"> <a href="index.html" class="screen-6__button">继续了解学习体验</a> </div> <!-- footer --> <footer class="footer"> <div class="footer__nav"> <a href="javascript:;" class="footer__nav_item">网站首页</a> <a href="javascript:;" class="footer__nav_item">人才招聘</a> <a href="javascript:;" class="footer__nav_item">联系我们</a> <a href="javascript:;" class="footer__nav_item">高校联盟</a> <a href="javascript:;" class="footer__nav_item">关于我们</a> <a href="javascript:;" class="footer__nav_item">讲师招募</a> <a href="javascript:;" class="footer__nav_item">意见反馈</a> <a href="javascript:;" class="footer__nav_item">友情链接</a> </div> <h3>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</h3> <!-- 右侧导航栏 --> <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> <script src="js/newtest.js"></script> <script src="js/newindex.js"></script> </footer> </body> </html>
/*公共样式*/
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei";
}
a {
text-decoration: none;
display: inline-block;
}
/*导航*/
.header {
width: 100%;
height: 60px;
background-color: rgba(255,255,255,0);
}
.header__logo {
height: 60px;
line-height: 60px;
padding-left: 50px;
margin-left: 10px;
background: url(../img/logo.png) no-repeat left center;
color: #fff;
font-size: 18px;
font-weight: bold;
}
.header__logo:hover {
color: #b71c0e;
}
.header__nav {
height: 40px;
line-height: 40px;
float: right;
margin-top: 10px;
position: relative;
}
.header__nav-item {
font-weight: normal;
font-size: 16px;
color: #fff;
padding-right: 30px;
}
.header__nav-item_button {
margin-right: 20px;
height: 40px;
padding: 0 18px;
background-color: red;
border-radius: 5px;
}
.header__nav-item_button:hover {
background-color: #b71c0e;
}
/*导航条*/
.header__nav-tip {
width: 65px;
height: 2px;
background-color: red;
border-radius: 2px;
position: absolute;
left: 0;
transition: all .8s;
}
/*第一屏*/
.screen-1 {
height: 640px;
background: url(../img/sc1.jpg) no-repeat center;
background-size: cover;
color: #fff;
position: relative;
}
.screen-1__heading {
font-size: 46px;
font-weight: bold;
/*color: #fff;*/
text-align: center;
padding-top: 170px;
}
.screen-1__subheading {
font-size: 14px;
font-weight: normal;
text-align: center;
padding-top: 20px;
}
/*第二屏*/
.screen-2 {
height: 640px;
background: url(../img/sc2.png) no-repeat bottom center;
background-color: #f3f5f7;
position: relative;
color: #000;
}
.screen-2__heading {
font-weight: bold;
font-size: 46px;
text-align: center;
padding-top: 50px;
}
.lines {
width: 50px;
height: 3px;
background: red;
position: absolute;
}
.screen-2__lines {
left: 50%;
margin-left: -25px;
top: 140px;
}
.screen-2__subheading {
font-weight: normal;
font-size: 14px;
text-align: center;
padding-top: 55px;
}
.screen-2__people {
width: 275px;
height: 380px;
background: url(../img/sc2-1.png) no-repeat center;
position: absolute;
left: 50%;
margin-left: -137.5px;
bottom: 0;
z-index: 3;
}
.screen-2__rocket {
width: 266px;
height: 205px;
background: url(../img/sc2-2.png) no-repeat center;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 100px;
z-index: 2;
}
/*第三屏*/
.screen-3 {
height: 640px;
background-color: #2b333b;
}
.screen-3__wrap {
width: 1200px;
height: 640px;
margin: 0 auto;
position: relative;
}
.screen-3__left {
width: 308px;
height: 340px;
background: url(../img/sc3.png);
position: absolute;
top: 50%;
margin-top: -154px;
left: 50px;
}
.screen-3__right {
padding-left: 600px;
}
.screen-3__heading {
color: #fff;
font-size: 38px;
padding-top: 250px;
}
.screen-3__lines {
margin: 20px 0;
}
.screen-3__subheading {
font-size: 14px;
font-weight: normal;
color: #fff;
padding-top: 40px;
}
.screen-3__tapy {
height: 60px;
margin-top: 120px;
transform: translate(0,300%);
}
.screen-3__tapy_item {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
border: 5px solid;
background: rgba(255,255,255,0);
display: inline-block;
font-size: 14px;
margin-right: 40px;
}
.screen-3__tapy_item-1 {
color: #2294ff;
border-color: rgba(34,148,255,.4);
}
.screen-3__tapy_item-2 {
color: #7888fd;
border-color: rgba(120,136,253,.4);
}
.screen-3__tapy_item-3 {
color: #ff584c;
border-color: rgba(255,88,76,.4);
}
.screen-3__tapy_item-4 {
color: #27bde5;
border-color: rgba(39,189,229,.4);
}
.screen-3__tapy_item-5 {
color: #90bd56;
border-color: rgba(144,189,86,.4);
}
/*第四屏*/
.screen-4 {
height: 640px;
background-color: #f3f5f7;
position: relative;
}
.screen-4__heading {
font-size: 46px;
color: #000;
text-align: center;
padding-top: 50px;
}
.screen-4__lines {
left: 50%;
margin-left: -25px;
top: 140px;
}
.screen-4__subheading {
font-weight: normal;
font-size: 14px;
text-align: center;
padding-top: 55px;
}
.screen-4__features {
width: 960px;
height: 120px;
margin: 100px auto;
}
.screen-4__features_item {
width: 160px;
height: 120px;
padding: 95px 40px 0;
float: left;
font-size: 14px;
text-align: center;
}
.screen-4__features_item-1 {
background: url(../img/sc4-1.png) no-repeat top center;
}
.screen-4__features_item-2 {
background: url(../img/sc4-2.png) no-repeat top center;
}
.screen-4__features_item-3 {
background: url(../img/sc4-3.png) no-repeat top center;
}
.screen-4__features_item-4 {
background: url(../img/sc4-4.png) no-repeat top center;
}
/*第五屏*/
.screen-5 {
height: 640px;
background-color: #ac151a;
background: url(../img/sc5.jpg) no-repeat center;
position: relative;
}
.screen-5__img {
width: 200px;
height: 200px;
position: absolute;
background: url(../img/sc5-1.png);
left: 50%;
margin-left: -100px;
top: 80px;
}
.screen-5__heading {
font-size: 46px;
color: #fff;
text-align: center;
padding-top: 330px;
}
.screen-5__lines {
background-color: #fff;
left: 50%;
margin-left: -25px;
top: 420px;
}
.screen-5__subheading {
font-size: 14px;
color: #fff;
text-align: center;
font-weight: normal;
margin-top: 60px;
}
/*第六屏按钮*/
.screen-6 {
height: 180px;
text-align: center;
}
.screen-6__button {
display: inline-block;
width: 220px;
height: 50px;
line-height: 50px;
border: 1px solid #666;
text-align: center;
color: #333;
font-size: 18px;
font-weight: bold;
margin: 64px 0;
border-radius: 5px;
}
.screen-6__button:hover {
color: red;
}
/*footer*/
.footer {
height: 80px;
background-color: #000;
text-align: center;
}
.footer__nav {
padding-top: 20px;
}
.footer__nav_item {
font-size: 14px;
color: #eee;
padding: 0 8px;
}
.footer h3 {
color: #999;
font-size: 14px;
font-weight: normal;
padding-top: 5px;
}
.footer__nav_item:hover {
color: red;
}
/*右侧导航*/
.outline {
position: fixed;
right: 0;
bottom: 120px;
box-shadow: 0 0 5px 5px rgba(0,0,0,.2);
border-radius: 5px;
background-color: #fff;
transform: translate(100%,0);
opacity: 0;
transition: all 1s;
}
.outline__item {
display: block;
margin: 10px 10px;
color: #333;
text-align: center;
}
.outline__item:hover {
color: red;
}
.outline_status_back {
opacity: 1;
transform: translate(0,0);
}
.outline_status_back_active {
color: red;
}
/*新增导航样式*/
.header {
transition: all 1s;
}
.header_status_back {
background-color: rgba(255,255,255,.4);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item {
color: #000;
}
.header_status_back .header__nav .header__nav-item_button {
color: #fff;
}/*第一屏*/
.header {
transition: all 1s;
}
.screen-1__heading {
transition: all 1s;
}
.header_animate_init {
opacity: 0;
transform: translate(0,-100%);
}
.header_animate_done,
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-1__subheading {
transition: all 1s .5s;
}
.screen-1__heading_animate_init {
opacity: 0;
transform: translate(0,30%);
}
.screen-1__subheading_animate_init {
opacity: 0;
transform: translate(0,50%);
}
/*第二屏*/
.screen-2__heading {
transition: all 1s;
}
.screen-2__heading_animate_init {
opacity: 0;
transform: translate(0,30%);
}
.screen-2__heading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-2__subheading {
transition: all 1s .5s;
}
.screen-2__subheading_animate_init {
opacity: 0;
transform: translate(0,50%);
}
.screen-2__subheading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-2__lines {
transition: all 1s .5s;
}
.screen-2__lines_animate_init {
opacity: 0;
}
.screen-2__lines_animate_done {
opacity: 1;
}
.screen-2__people {
transition: all 1s .5s;
}
.screen-2__people_animate_init {
opacity: 0;
}
.screen-2__people_animate_done {
opacity: 1;
}
/*火箭*/
.screen-2__rocket_animation {
-webkit-animation: rocket .8s 1.5s;
}
@-webkit-keyframes rocket {
0% {
transform: translate(0,100%);
opacity: 1;
}
55% {
transform: translate(0,-10%);
opacity: 1;
}
70% {
transform: translate(0,0);
opacity: 1;
}
85% {
transform: translate(0,-10%);
opacity: 1;
}
100% {
transform: translate(0,0);
opacity: 1;
}
}
/*第三屏*/
.screen-3__heading {
transition: all 1s;
}
.screen-3__heading_animate_init {
opacity: 0;
transform: translate(0,30%);
}
.screen-3__heading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-3__subheading {
transition: all 1s .5s;
}
.screen-3__subheading_animate_init {
opacity: 0;
transform: translate(0,50%);
}
.screen-3__subheading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-3__lines {
transition: all 1s .5s;
}
.screen-3__lines_animate_init {
opacity: 0;
}
.screen-3__lines_animate_done {
opacity: 1;
}
.screen-3__left {
transition: all .5s;
}
.screen-3__left_animate_init {
transform: scale(.2);
}
.screen-3__left_animate_done {
transform: scale(1);
}
.screen-3__tapy_animation {
-webkit-animation: tapy .8s 1.5s;
}
@-webkit-keyframes tapy {
0% {
transform: translate(0,300%);
opacity: 1;
}
55% {
transform: translate(0,-20%);
opacity: 1;
}
70% {
transform: translate(0,0);
opacity: 1;
}
85% {
transform: translate(0,-20%);
opacity: 1;
}
100% {
transform: translate(0,0);
opacity: 1;
}
}
/*第四屏*/
.screen-4__heading {
transition: all 1s;
}
.screen-4__heading_animate_init,
.screen-4__subheading_animate_init {
opacity: 0;
transform: translate(0,30%);
}
.screen-4__heading_animate_done,
.screen-4__subheading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-4__subheading,
.screen-4__lines {
transition: all 1s 1s;
}
.screen-4__lines_animate_init {
opacity: 0;
}
.screen-4__lines_animate_done {
opacity: 1;
}
.screen-4__features_item-1,
.screen-4__features_item-2,
.screen-4__features_item-3,
.screen-4__features_item-4 {
transition: all 1s;
}
.screen-4__features_item-1_animate_init,
.screen-4__features_item-2_animate_init,
.screen-4__features_item-3_animate_init,
.screen-4__features_item-4_animate_init {
transform: scale(.2);
opacity: 0;
}
.screen-4__features_item-1_animate_done,
.screen-4__features_item-2_animate_done,
.screen-4__features_item-3_animate_done,
.screen-4__features_item-4_animate_done {
transform: scale(1);
opacity: 1;
}
/*第五屏*/
.screen-5__img {
transition: all .5s;
}
.screen-5__img_animate_init {
transform: scale(.2);
}
.screen-5__img_animate_done {
transform: scale(1);
}
.screen-5__heading {
transition: all 1s;
}
.screen-5__heading_animate_init,
.screen-5__subheading_animate_init {
opacity: 0;
transform: translate(0,30%);
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done {
opacity: 1;
transform: translate(0,0);
}
.screen-5__subheading,
.screen-5__lines {
transition: all 1s .5s;
}
.screen-5__lines_animate_init {
opacity: 0;
}
.screen-5__lines_animate_done {
opacity: 1;
}//获取单个元素
var getElement = function(selector){
return document.querySelector(selector);
}
//获取多个元素
var getAllElement = 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);
if(baseCls.indexOf(cls) !== -1){
setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
}
}
// 所有需要动画效果的元素
var screenAnimateElements = {
".screen-1":[
".header",
".screen-1__heading",
".screen-1__subheading",
],
".screen-2":[
".screen-2__heading",
".screen-2__lines",
".screen-2__subheading",
".screen-2__people",
".screen-2__rocket",
],
".screen-3":[
".screen-3__left",
".screen-3__heading",
".screen-3__lines",
".screen-3__subheading",
],
".screen-4":[
".screen-4__heading",
".screen-4__lines",
".screen-4__subheading",
".screen-4__features_item-1",
".screen-4__features_item-2",
".screen-4__features_item-3",
".screen-4__features_item-4",
],
".screen-5":[
".screen-5__img",
".screen-5__heading",
".screen-5__lines",
".screen-5__subheading",
]
}
//页面加载时，初始化样式
window.onload = function(){
for(var k in screenAnimateElements){
if(k === ".screen-1"){
continue;
}
setScreenAnimateInit(k);
}
}
//初始化样式,将所有样式都变为init
var setScreenAnimateInit = function(screenCls){
var screen = document.querySelector(screenCls);
var animateElements = screenAnimateElements[screenCls];
for(var i=0;i<animateElements.length;i++){
//先获取到每个需要动画的元素,即screenAnimateElements中的每个数组对象中的值
var element = document.querySelector(animateElements[i]);
//再获取每个元素的类名
var basecls = element.getAttribute("class");
//为每个需要动画的元素添加init样式，即增加新的类名
element.setAttribute("class",basecls+" "+animateElements[i].substr(1)+"_animate_init");
}
}
//将所有样式变为done
var setScreenAnimateDone = function(screenCls){
var screen = document.querySelector(screenCls);
var animateElements = screenAnimateElements[screenCls];
for(var i=0;i<animateElements.length;i++){
//先获取到每个需要动画的元素,即screenAnimateElements中的每个数组对象中的值
var element = document.querySelector(animateElements[i]);
//再获取每个元素的类名
var basecls = element.getAttribute("class");
//将元素名改成done
element.setAttribute("class",basecls.replace("_animate_init","_animate_done"));
}
}
setTimeout(function(){setScreenAnimateDone('.screen-1');},100);
//当滚动条滚动到某一屏的时候，将导航条移到对应的位置
var switchNavItemsActive = function(idx){
//清除所有当前样式
for(var i=0;i<navItems.length;i++){
delCls(navItems[i],"header__nav-item_active");
tip.style.left = 0+"px";
}
addCls(navItems[idx],"header__nav-item_active");
tip.style.left = (idx*99)+"px";
//清除右边导航样式
for(var i=0;i<outlineItems.length;i++){
delCls(outlineItems[i],"outline_status_back_active");
tip.style.left = 0+"px";
}
addCls(outlineItems[idx],"outline_status_back_active");
tip.style.left = (idx*99)+"px";
}
//滚动条设置
window.onscroll = function(){
var top = document.body.scrollTop;
console.log(top);
// 设置导航和右边导航
if(top > 60){
addCls(getElement(".header"),"header_status_back");
addCls(getElement(".outline"),"outline_status_back");
}else{
delCls(getElement(".header"),"header_status_back");
delCls(getElement(".outline"),"outline_status_back");
}
if(top > 1){
setScreenAnimateDone(".screen-1");
switchNavItemsActive(0);
}
if(top > 1*640-100){
var rocket = getElement(".screen-2__rocket");
addCls(rocket,"screen-2__rocket_animation");
setScreenAnimateDone(".screen-2");
switchNavItemsActive(1);
}
if(top > 2*640-100){
var tapy = getElement(".screen-3__tapy");
addCls(tapy,"screen-3__tapy_animation");
setScreenAnimateDone(".screen-3");
switchNavItemsActive(2);
}
if(top > 3*640-100){
setScreenAnimateDone(".screen-4");
switchNavItemsActive(3);
}
if(top > 4*640-100){
setScreenAnimateDone(".screen-5");
switchNavItemsActive(4);
}
}
//将导航与每一屏绑定
var navItems = getAllElement(".header__nav-item");
var outlineItems = getAllElement(".outline__item");
var setNavJump = function(i,lib){
lib[i].onclick = function(){
document.body.scrollTop = i*640;
}
}
for(var i=0;i<navItems.length;i++){
setNavJump(i,navItems);
}
for(var i=0;i<outlineItems.length;i++){
setNavJump(i,outlineItems);
}
//导航条滑动效果
var tip = getElement(".header__nav-tip");
var index = 0;
var setTip = function(idx){
navItems[idx].onmousemove = function(){
tip.style.left = (idx*99)+"px";
}
navItems[idx].onmouseout = function(){
for(var i=0;i<navItems.length;i++){
if(getCls(navItems[i]).indexOf("header__nav-item_active") !== -1){
break;
}
index = i;
}
tip.style.left = (i*99)+"px";
}
}
for(var i=0;i<navItems.length-1;i++){
setTip(i);
}火箭每次出来之后又消失了，下面的五个小圆也是这样，麻烦解答下，谢谢
9
收起
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星