顶部导航条问题
老师，为什么我给顶部的导航条的设置了一个移入的动画效果就是不生效呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animation.css">
<title>Document</title>
</head>
<body>
<!-- 导航栏 -->
<header class="header">
<div class="logo">H5实战页面</div>
<nav class="header__nav">
<a href="javascript:;" class="active">实战课程</a>
<a href="javascript:;">商业案例</a>
<a href="javascript:;">课程体系</a>
<a href="javascript:;">集成环境</a>
<a href="javascript:;">云端学习</a>
<a href="javascript:;" class="button">即刻学习</a>
</nav>
</header>
<!-- 第一屏 -->
<div class="screen-1" id="skip">
<div class="content">
<h2 class="screen-1__content__h2">实践课程重磅上线</h2>
<p class="screen-1__content__tittle">一键云学习，还在等待什么？</p>
</div>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<div class="content">
<h2 class="screen-2__content__h2">每门课都是真实商业案例</h2>
<hr class=screen-2__content__hr>
<div class="screen-2__content__tittle">
真实案例、真实场景，在实战中实践、操作、调试<br/>
大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现
</div>
</div>
<img class="screen-2__img-1" src='img/sc2-1.png'>
<img class="screen-2__img-2" src='img/sc2-2.png'>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="content">
<h2 class="screen-3__content__h2">强大的语言课程体系支持</h2>
<hr class="screen-3__content__hr">
<div class="screen-3__content__tittle">
学习环境与课程体系轻松对接，安装、调试、写入、部署、运行，一站式解决，<br/>
让你体验开发全流程
</div>
<div class="screen-3__content__tag">
<span class="screen-3__content__tag__item1">HTML5</span>
<span class="screen-3__content__tag__item2">PHP</span>
<span class="screen-3__content__tag__item3">JAVA</span>
<span class="screen-3__content__tag__item4">Python</span>
<span class="screen-3__content__tag__item5">Node.js</span>
</div>
</div>
</div>
<!-- 第四屏 -->
<div class="screen-4">
<div class="content">
<h2 class="screen-4__content__h2">省去本地复杂的环境搭建</h2>
<hr class="screen-4__content__hr">
<div class="screen-4__content__tittle">
你可以告别在虚拟机中调试开发了
</div>
<div class="screen-4__content__tag">
<span class="screen-4__content__tag__item1">实战课程集中开发环境</span>
<span class="screen-4__content__tag__item2">内置终端命令行</span>
<span class="screen-4__content__tag__item3">编译你的应用程序</span>
<span class="screen-4__content__tag__item4">通过云端服务输出效果</span>
</div>
</div>
</div>
<!-- 第五屏 -->
<div class="screen-5">
<div class="screen-5__content">
<h2 class="screen-5__content__h2">云端学习可以这样简单</h2>
<hr class="screen-5__content__hr">
<div class="screen-5__content__tittle">
看视频，敲代码，可以一气呵成。结合慕课网给你提供的云端学习工具，所见即所得。从此学习不一样
</div>
</div>
<div class="study">
<button><a href="#skip">继续了解学习体验</a></button>
</div>
<footer>
<nav>
<a href="javascript:;">网站首页</a>
<a href="javascript:;">人才招聘</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">高校联盟</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">讲师招募</a>
<a href="javascript:;">意见反馈</a>
<a href="javascript:;">友情链接</a>
</nav>
<p>
Copyright © 2015 imooc.com All Rights Reserved |京ICP备1304664-2号
</p>
</footer>
</div>
<!-- 右侧导航条 -->
<div class="outline">
<ul>
<li><a href="javascript:;" >实</a></li>
<li><a href="javascript:;" >商</a></li>
<li><a href="javascript:;" >课</a></li>
<li><a href="javascript:;" >云</a></li>
<li><a href="javascript:;" >即</a></li>
</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
-------------------------------------------------------
*{
margin:0;
padding:0;
}
body{
width:100%;
background:#000;
}
a{
text-decoration:none;
}
/* 导航栏 */
.header{
width:100%;
height:80px;
margin:0 auto;
color:#fff;
position:fixed;
z-index:1;
}
.logo{
width:100px;
height:20px;
padding:30px 50px;
margin-left:20px;
font-size:16px;
background:url(../img/logo.png) left center no-repeat;
float:left;
/* animation:logo 1s ease-in-out 1s; */
}
.header__nav{
float:right;
height:40px;
margin-right:20px;
padding:20px 0;
cursor:pointer;
}
.header__nav > a{
display:inline-block;
width:80px;
height:38px;
line-height:38px;
text-align:center;
margin-left:10px;
color:#fff;
}
.header__nav .active{
border-bottom:2px solid #f00;
}
.header__nav .button{
background:#f00;
border-radius:5px;
}
.header__nav .button:hover{
transition:all 1s;
background:rgba(255, 0, 0, 0.8);
}
/* 第一屏 */
.screen-1{
width:100%;
background:url(../img/sc1.jpg) left top no-repeat;
background-size:cover;
height:640px;
position: relative;
}
.screen-1 .content{
width:300px;
height:100px;
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-50px;
color:#fff;
}
.screen-1 .content h2{
height:60px;
line-height:60px;
text-align:center;
}
.screen-1__content__tittle{
height:40px;
line-height:40px;
text-align:center;
}
/* 第二屏 */
.screen-2{
width:100%;
background:url(../img/sc2.png) center bottom no-repeat;
/* url(../img/sc2-2.png) 700px 350px no-repeat,
url(../img/sc2.png) center bottom no-repeat;
前一张会覆盖后一张背景图，x轴+，向右，y轴+，向下 */
background-color:rgb(243,245,247);
height:640px;
position: relative;
}
.screen-2__img-1{
position:absolute;
z-index:1;
bottom:0;
left:50%;
margin-left:-137.5px;
}
.screen-2__img-2{
position:absolute;
bottom:90px;
left:50%;
margin-left:-50px;
}
.screen-2 .content{
width:450px;
height:150px;
position:absolute;
left:50%;
margin-left:-225px;
top:100px;
color:#000;
}
.screen-2__content__h2{
height:60px;
line-height:60px;
text-align:center;
}
.screen-2__content__hr{
background: #f00;
border:1px solid #f00;
width:50px;
margin-left:200px;
}
.screen-2__content__tittle{
color:rgb(7,17,27);
height:60px;
text-align:center;
line-height:20px;
padding:15px 0;
}
/* 第三屏 */
.screen-3{
width:100%;
height:640px;
background:url(../img/sc3.png) 100px center no-repeat;
background-color:rgb(43,51,59);
position:relative;
}
.screen-3 .content{
width:600px;
position:absolute;
left:750px;;
top:200px;
color:#fff;
}
.screen-3__content__h2{
height:60px;
line-height:60px;
text-align:left;
}
.screen-3__content__hr{
background: #f00;
border:1px solid #f00;
width:50px;
}
.screen-3__content__tittle{
height:60px;
text-align:left;
line-height:20px;
padding:15px 0;
}
.screen-3__content__tag{
margin-top:150px;
}
.screen-3__content__tag span{
display:inline-block;
width:60px;
height:60px;
margin-right:20px;
border-radius:50%;
line-height:60px;
text-align:center;
}
.screen-3__content__tag__item1{
border:2px solid rgb(31,89,117);
color:rgb(31,89,117);
}
.screen-3__content__tag__item2{
border:2px solid rgb(66,77,118);
color:rgb(66,77,118);
}
.screen-3__content__tag__item3{
border:2px solid rgb(107,65,70);
color:rgb(107,65,70);
}
.screen-3__content__tag__item4{
border:2px solid rgb(41,83,95);
color:rgb(41,83,95);
}
.screen-3__content__tag__item5{
border:2px solid rgb(62,78,64);
color:rgb(62,78,64);
}
/* 第四屏 */
.screen-4{
width:100%;
height:640px;
background:#fff;
position:relative;
}
.screen-4 .content{
width:800px;
height:450px;
/* margin:100px auto 150px; */
/* 子元素设置margin-top，导致父级也下移了
这是一个css hack 问题 ，外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，
解决方案：
（1）为父元素增加padding-top样式
（2）为父元素添加overflow:hidden;
（3）为父元素或者子元素声明浮动
（4）为父元素添加border（border:1px solid transparent）
（5）为父元素声明绝对定位 */
position:absolute;
left:50%;
margin-left:-400px;
top:50%;
margin-top:-200px;
}
.screen-4__content__h2{
height:60px;
line-height:60px;
text-align:center;
}
.screen-4__content__hr{
background: #f00;
border:1px solid #f00;
width:50px;
margin-left:375px;
}
.screen-4__content__tittle{
height:60px;
text-align:center;
line-height:20px;
padding:15px 0;
}
.screen-4__content__tag{
margin-top:30px;
}
.screen-4__content__tag span{
display:inline-block;
text-align:center;
width:180px;
/* 通过padding-top设置元素的上内填充图片，设置高度显示内容。
因为图片可以在padding区域显示，但是文字只能从内容区域开始显示 */
padding-top:70px;
height:40px;
line-height:40px;
/* 另一种方法，通过设置行高实现文字正确显示
height:150px;
line-height:200px; */
}
.screen-4__content__tag__item1{
background:url(../img/sc4-1.png) center top no-repeat;
}
.screen-4__content__tag__item2{
background:url(../img/sc4-2.png) center top no-repeat;
}
.screen-4__content__tag__item3{
background:url(../img/sc4-3.png) center top no-repeat;
}
.screen-4__content__tag__item4{
background:url(../img/sc4-4.png) center top no-repeat;
}
/* 第五屏 */
.screen-5{
width:(100%)-2px;
height:440px;
margin:0 auto;
background:url(../img/sc5.jpg) center center no-repeat;
background-size:cover;
/* 给父元素加border，下面margin居中才能生效 */
border:1px solid transparent;
}
.screen-5__content{
width:800px;
margin:50px auto 30px;
background:url(../img/sc5-1.png) center top no-repeat;
padding-top:220px;
color:#fff;
}
.screen-5__content__h2{
height:30px;
line-height:30px;
text-align:center;
margin-bottom:20px;
}
.screen-5__content__hr{
background: #fff;
border:1px solid #fff;
width:50px;
margin-left:375px;
}
.screen-5__content__tittle{
height:60px;
text-align:center;
line-height:20px;
padding:20px 0 0;
}
.screen-5 .study{
height:40px;
background:#fff;
padding:30px 680px;
}
.screen-5 .study button{
width:150px;
height:39px;
border:1px solid rgb(112,112,112);
border-radius:5px;
}
.screen-5 .study button a{
color:#000;
}
.screen-5 .study button:hover a{
color:#f00;
}
footer{
height:100px;
background:#000;
color:#fff;
}
footer nav{
text-align:center;
height:50px;
line-height:50px;
}
footer nav a{
display:inline-block;
color:#fff;
margin-right:20px;
}
footer nav a:hover{
color:#f00;
cursor:pointer;
}
footer p{
text-align:center;
height:50px;
}
/* 左侧导航栏 */
.outline{
position:fixed;
z-index:3;
bottom:200px;
right:0;
padding:5px 10px;
background:#fff;
}
.outline a{
width:40px;
height:50px;
text-align:center;
line-height:50px;
color:rgb(112,112,112);
}
.outline ul{
list-style: none;
}
.outline li{
border-top:1px solid rgb(112,112,112);
}
.outline li:first-child{
border:none;
}
/* 给li里嵌套a标签，就可以做到让鼠标移到文字上才变颜色*/
.outline a:hover{
color:#f00;
}
-----------------------------------------
/* header */
.header{
transition:all 1s;
}
.header_animation_init{
transform:translate(0,-100%);
opacity:0;
}
.header_animation_done{
transform:translate(0,0);
opacity:1;
}
.header_status_black{
background:rgba(0,0,0,.3);
}
/* 第一屏 */
/* transition:all 1s 2s 让动画效果更平滑，第一个时间为持续时间，第二个时间为延迟时间 */
.screen-1__content__h2{
transition:all 1s;
}
.screen-1__content__h2_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-1__content__h2_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-1__content__tittle{
transition:all 1s 1s;
}
.screen-1__content__tittle_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-1__content__tittle_animation_done{
transform:translate(0,0);
opacity:1;
}
/* 第二屏 */
.screen-2__content__h2{
transition:all 1s;
}
.screen-2__content__h2_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-2__content__h2_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__content__hr,
.screen-2__content__tittle{
transition:all 1s 1.5s;
}
.screen-2__content__hr_animation_init,
.screen-2__content__tittle_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-2__content__hr_animation_done,
.screen-2__content__tittle_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__img-1{
transition:all 1s;
}
.screen-2__img-1_animation_init{
opacity:0;
}
.screen-2__img-1_animation_done{
opacity:1;
}
.screen-2__img-2{
transition:all 1s 2s;
}
.screen-2__img-2_animation_init{
transform:translate(0,150%);
}
.screen-2__img-2_animation_done{
transform:translate(0,0);
}
/* 第三屏 */
.screen-3__content__h2{
transition:all 1s;
}
.screen-3__content__h2_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__content__h2_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-3__content__hr,
.screen-3__content__tittle{
transition:all 1s 2s;
}
.screen-3__content__hr_animation_init,
.screen-3__content__tittle_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__content__hr_animation_done,
.screen-3__content__tittle_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-3{
transition:all 1s;
}
.screen-3_animation_init{
background-size:30px 34px;
}
.screen-3_animation_done{
background-size:308px 340px;
}
.screen-3__content__tag{
transition:all 1s 2s;
}
.screen-3__content__tag_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__content__tag_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-3__content__tag__item5,
.screen-3__content__tag__item4,
.screen-3__content__tag__item3,
.screen-3__content__tag__item2,
.screen-3__content__tag__item1{
transition:all 1s;
position:relative;
}
/* .screen-3__content__tag__item5:hover,
.screen-3__content__tag__item4:hover,
.screen-3__content__tag__item3:hover,
.screen-3__content__tag__item2:hover,
.screen-3__content__tag__item1:hover{
transform:scale(1.2);
cursor:pointer;
} */
@keyframes bounce{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.2);
}
}
.screen-3__content__tag__item1::before,
.screen-3__content__tag__item1::after,
.screen-3__content__tag__item2::before,
.screen-3__content__tag__item2::after,
.screen-3__content__tag__item3::before,
.screen-3__content__tag__item3::after,
.screen-3__content__tag__item4::before,
.screen-3__content__tag__item4::after,
.screen-3__content__tag__item5::before,
.screen-3__content__tag__item5::after{
content:' ';
display:block;
width:58px;
height:58px;
position:absolute;
top:-1px;
left:-1px;
border-radius:50%;
animation:bounce 2s infinite;
}
.screen-3__content__tag__item1::before,
.screen-3__content__tag__item1::after{
border:2px solid rgb(31,89,117);
}
.screen-3__content__tag__item2::before,
.screen-3__content__tag__item2::after{
border:2px solid rgb(66,77,118);
}
.screen-3__content__tag__item3::before,
.screen-3__content__tag__item3::after{
border:2px solid rgb(107,65,70);
}
.screen-3__content__tag__item4::before,
.screen-3__content__tag__item4::after{
border:2px solid rgb(41,83,95);
}
.screen-3__content__tag__item5::before,
.screen-3__content__tag__item5::after{
border:2px solid rgb(62,78,64);
}
.screen-3__content__tag__item1::after,
.screen-3__content__tag__item2::after,
.screen-3__content__tag__item3::after,
.screen-3__content__tag__item4::after,
.screen-3__content__tag__item5::after{
animation:bounce 2s infinite 1s;
}
/* 第四屏 */
.screen-4__content__h2{
transition:all 1s;
}
.screen-4__content__h2_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-4__content__h2_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-4__content__hr,
.screen-4__content__tittle{
transition:all 1s 2s;
}
.screen-4__content__hr_animation_init,
.screen-4__content__tittle_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-4__content__hr_animation_done,
.screen-4__content__tittle_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-4__content__tag__item1,
.screen-4__content__tag__item2,
.screen-4__content__tag__item3,
.screen-4__content__tag__item4{
transition:all 1s;
}
.screen-4__content__tag__item1_animation_init,
.screen-4__content__tag__item2_animation_init,
.screen-4__content__tag__item3_animation_init,
.screen-4__content__tag__item4_animation_init{
transform:scale(.1,.1);
}
.screen-4__content__tag__item1_animation_done,
.screen-4__content__tag__item2_animation_done,
.screen-4__content__tag__item3_animation_done,
.screen-4__content__tag__item4_animation_done{
transform:scale(1,1);
}
/* 第五屏 */
.screen-5__content__h2{
transition:all 1s;
}
.screen-5__content__h2_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-5__content__h2_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-5__content__hr,
.screen-5__content__tittle{
transition:all 1s 2s;
}
.screen-5__content__hr_animation_init,
.screen-5__content__tittle_animation_init{
transform:translate(0,100%);
opacity:0;
}
.screen-5__content__hr_animation_done,
.screen-5__content__tittle_animation_done{
transform:translate(0,0);
opacity:1;
}
.screen-5__content{
transition:all 1s;
}
.screen-5__content_animation_init{
background-size:20px 20px;
}
.screen-5__content_animation_done{
background-size:200px 200px;
}
--------------------------------------------------------------
//获取元素
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);
if(baseCls.indexOf(cls) != -1){
setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
// /\s+/g,正则表达式实现删除类名后的多个空格变为一个空格,不加g只替换一个空格
}
}
// 设置动画第一步：页面载入完成之后 初始化样式 init
//拿到需要添加动画的所有元素类名
var screenAnimationElements = {
'.screen-1' : [
'.screen-1__content__h2',
'.screen-1__content__tittle',
],//逗号不能少
'.screen-2' : [
'.screen-2__content__h2',
'.screen-2__content__hr',
'.screen-2__content__tittle',
'.screen-2__img-1',
'.screen-2__img-2',
],
'.screen-3' : [
'.screen-3__content__h2',
'.screen-3__content__hr',
'.screen-3__content__tittle',
'.screen-3',
'.screen-3__content__tag',
'.screen-3__content__tag__item1',
'.screen-3__content__tag__item2',
'.screen-3__content__tag__item3',
'.screen-3__content__tag__item4',
'.screen-3__content__tag__item5',
],
'.screen-4' : [
'.screen-4__content__h2',
'.screen-4__content__hr',
'.screen-4__content__tittle',
'.screen-4__content__tag',
'.screen-4__content__tag__item1',
'.screen-4__content__tag__item2',
'.screen-4__content__tag__item3',
'.screen-4__content__tag__item4',
],
'.screen-5' : [
'.screen-5__content__h2',
'.screen-5__content__hr',
'.screen-5__content__tittle',
'.screen-5__content',
]
}
//设置屏内元素为初始状态
var setScreenAnimationInit = function(screenCls){//此函数的参数为屏幕中要设置动画的类名screenCls
var screen = document.querySelector(screenCls);//获取当前屏幕的元素
var animationElements = screenAnimationElements[screenCls];//需要设置动画的元素
for(var i=0;i<animationElements.length;i++){
var element = document.querySelector(animationElements[i]);
var baseCls = element.getAttribute("class");//拿出最开始设置的类名
element.setAttribute('class',baseCls+' '+animationElements[i].substr(1)+'_animation_init');//初始化
//因为animationElements[i]的样式名前面有一个点，需要去掉，所以用substr
}
}
//设置屏内元素为播放状态
var playScreenAnimationDone = function(screenCls){//注意这里的参数screenCls不能省略
var screen = document.querySelector(screenCls);//获取当前屏幕的元素
var animationElements = screenAnimationElements[screenCls];//需要设置动画的元素
for(var i=0;i<animationElements.length;i++){
var element = document.querySelector(animationElements[i]);
var baseCls = element.getAttribute("class");//拿出最开始设置的类名
element.setAttribute('class',baseCls.replace('_animation_init','_animation_done'));
}
}
for(k in screenAnimationElements){
setScreenAnimationInit(k);
}
// 第二步：屏幕滚动到哪里，动画就播放到哪里
window.onscroll = function(){
var top = document.documentElement.scrollTop||document.body.scrollTop;//兼容性问题，最好这样写
console.log(top);
if(top>80){
addCls(getElem('.header'), 'header_status_black');
}else{
delCls(getElem('.header'), 'header_status_black');
}
if(top > 1){
playScreenAnimationDone('.screen-1');//注意这里类名前面的.
}
if(top > 600*1){
playScreenAnimationDone('.screen-2');//注意这里类名前面的.
}
if(top > 600*2){
playScreenAnimationDone('.screen-3');//注意这里类名前面的.
}
if(top > 600*3){
playScreenAnimationDone('.screen-4');//注意这里类名前面的.
}
if(top > 600*4){
playScreenAnimationDone('.screen-5');//注意这里类名前面的.
}
}
正在回答
同学你好，这是因为只在样式中定义了动画，并没有在js中调用。如下设置：
右侧的移入指的是下划线这一块的效果吗？这个在后面的章节中有讲解，建议同学复习一下视频，跟着视频一步一步的进行操作即可 。地址如下：https://class.imooc.com/lesson/781#mid=19652
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星