体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

呼吸灯不会实现

来源：5-6 作业题

抓住这只猪

2019-11-16 15:00:37

<!DOCTYPE html>
<html>
<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>综合项目</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<link rel="stylesheet" type="text/css" href="./css/animation.css">
</head>
<body>
    <!-- 导航条 -->
    <header class="header">
        <div class="header__logo">H5实战页面</div>
        <nav class="header__nav">
            <a href="javascript:void(0);" class="header__nav-item header__nav-item_status_active">实战课程</a>
            <a href="javascript:void(0);" class="header__nav-item">商业案例</a>
            <a href="javascript:void(0);" class="header__nav-item">课程体系</a>
            <a href="javascript:void(0);" class="header__nav-item">集成环境</a>
            <a href="javascript:void(0);" class="header__nav-item">云端学习</a>
            <a href="javascript:void(0);" class="header__nav-item header__nav-item_custom_button">即可学习</a>
        </nav>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <div class="screen-1__wrap">
        <h2 class="screen-1__heading">实战课程重磅上线</h2>
        <h3 class="screen-1__subheading">一键云学习，还在等待什么？</h3>
        </div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <div class="screen-2__wrap">
            <h2 class="screen-2__heading">每门课都是真实商业案例</h2>
            <div class="screen-2__line line"></div>
            <h3 class="screen-2__subheading">真实案例，真实场景，在实战中实践、操作、调试<br/>大牛带你体验BAT真实开发流程，所有开发过程一一呈现</h3>
            <div class="screen-2__bat"></div>
            <div class="screen-2__rocket"></div>
            <div class="screen-2__man"></div>
        </div>
    </div>

    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3__wrap">
        <div class="screen-3__bigpic"></div>
              <div class="screen-3__subwrap">
            <h2 class="screen-3__heading">强大的语言课程体系支持</h2>
            <div class="screen-3__line line"></div>
            <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发犬流程</h3>
            <div class="screen-3__item">
                <div class="screen-3__item_pics screen-3__item_pics-i-1">HTML5</div>
                <div class="screen-3__item_pics screen-3__item_pics-i-2">PHP</div>
                <div class="screen-3__item_pics screen-3__item_pics-i-3">JAVA</div>
                <div class="screen-3__item_pics screen-3__item_pics-i-4">Python</div>
                <div class="screen-3__item_pics screen-3__item_pics-i-5">Node.js</div>
            </div>
        </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4__wrap">
            <h2 class="screen-4__heading">省去本地复杂的环境搭配</h2>
            <div class="screen-4__line line"></div>
            <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__type__item__desc">实战课程集成开发环境</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__type__item__desc">内置终端命令行</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__type__item__desc">编译你的应用程序 </div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__type__item__desc">通过云端服务输出效果</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
        <div class="screen-5__wrap">
            <div class="screen-5__bgpic"></div>
            <h2 class="screen-5__heading">云端学习可以这样简单</h2>
            <div class="screen-5__line line"></div>
            <h3 class="screen-5__subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见既所得。从此学习不一样</h3>
        </div>
    </div>
    <!-- 其他 -->
    <div class="screen-ade">
        <a href="javascript:void(0);" class="screen-ade__button">继续了解学习体验</a>
    </div>
    <!-- 页脚 -->
    <footer class="footer">         
        <nav class="footer__nav">
            <a href="javascript:void(0);" class="footer__nav__item">网站首页</a>
            <a href="javascript:void(0);" class="footer__nav__item">人才招聘</a>
            <a href="javascript:void(0);" class="footer__nav__item">联系我们</a>
            <a href="javascript:void(0);" class="footer__nav__item">高校联盟 </a>
            <a href="javascript:void(0);" class="footer__nav__item">关于我们</a>
            <a href="javascript:void(0);" class="footer__nav__item">讲师招募</a>
            <a href="javascript:void(0);" class="footer__nav__item">意见反馈 </a>
            <a href="javascript:void(0);" class="footer__nav__item">友情链接</a>
        </nav>
       <br/>Copyright &copy; 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2         
    </footer>
    <script type="text/javascript" src="./js/test.js"></script>
</body>
</html>




*{
    margin: 0;
    padding:0;
}
body{
     background-color: #fff;
     font-size: 12px;
     font-family: "Microsoft Yahei",微软雅黑;
}
a{
    text-decoration: none;

}
.line{
    position: absolute;
    width: 50px;
    height: 3px;
    
}
/*导航条*/
.header{
    width: 100%;
    height: 60px;
    position: relative;
    float: left;  /*可能要修改的地方*/

    background: linear-gradient(black,transparent);
}
.header__logo{
    width:150px;
    height: 40px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    background:url(../img/logo.png) no-repeat center left;
    background-size:40px 40px;
    text-indent: 50px;
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    left:10px;
}

.header__nav{
    position: absolute;
    margin-top: 10px;
    right:30px;
}
.header__nav-item{
   display: block;
   font-size: 12px;
   color: #fff;
   line-height: 40px;
   height: 40px;  
   float: left;
   margin-left:40px;    
}
.header__nav-item_custom_button{
  height: 40px;
  width: 96px;
  text-align: center;
  background-color: #f01400;
  color:#fbf0ef;
  border-radius: 3px;
  margin-left: 30px;
}
.header__nav-item_custom_button:hover{
    background-color: #fbf0ef;
    color: #f01400;
}
.header__nav-item_status_active{
    color:#f01400;
    position: relative;
 
}
.header__nav-item_status_active::after{
   content: "";
   position: absolute;
   width: 100%;
   bottom:0;
   left: 0;
   height: 2px;
   background-color: #f01400;
}
/*第一屏*/
.screen-1{
    width: 100%;
    height: 640px;
    background:url(../img/sc1.jpg) no-repeat center;
    background-size: cover;
    text-align: center;
    color: #fff;

}
.screen-1__wrap{
    width: 1200px;
    height: 640px;
    margin: 0 auto;
}
.screen-1__heading{
   font-size: 42px;
   line-height: 42px;
   padding-top:240px;/*使用margin-top会把screen给撑开;使用position也会使得页面变形*/
   font-weight: normal;
}
.screen-1__subheading{
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  padding-top:25px;
}

/*第二屏*/
.screen-2{
    width:100%;
    height: 640px;
    background-color: #f3f5f7;
    text-align:center;
    color: #07111b;
    overflow: hidden;

}
.screen-2__wrap{
    width: 1200px;
    height: 640px;
    margin: 0 auto;
    position: relative;

    
}
.screen-2__heading{
   font-size: 42px;
   line-height: 42px;
   padding-top:90px;
   font-weight: normal;

}
.screen-2__line{
    
    left: 50%;
    margin-left:-25px;
    margin-top:38px;
    background-color: #f01400;

}
.screen-2__subheading{
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  padding-top:57px;
 
}

.screen-2__bat{
    width: 750px;
    height: 380px;
    position: absolute;
    left: 50%;
    margin-left: -375px;
    background: url(../img/sc2.png) no-repeat bottom;
    bottom: 0;
   /*,url(../img/sc2-2.png) no-repeat center,url(../img/sc2.png) no-repeat center bottom;*/
}
.screen-2__rocket{
    width: 266px;
    height: 205px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    background: url(../img/sc2-2.png) no-repeat;
    bottom:100px;
    
}

.screen-2__man{
    width: 275px;
    height: 380px;
    position: absolute;
    left: 50%;
    margin-left: -137px;
    background: url(../img/sc2-1.png) no-repeat bottom;
    bottom: 0;
}
/*第三屏*/

.screen-3{
    width: 100%;
    height: 640px;
    position: relative;
    background-color: #2b333b;
}
.screen-3__wrap{
    max-width: 1800px;
    height: 640px;
    position: relative;
    margin: 0 auto;
}
.screen-3__bigpic{
    width: 500px;
    height: 500px;
    position: absolute;
    top:50%;
    margin-top: -250px;
    background:url(../img/sc3.png) no-repeat center;
    background-size: contain;
    margin-left: 100px;
}

.screen-3__subwrap{
    width: 530px;
    height: 640px;
    position: absolute;
    right: 240px;
    text-align: left;

}
.screen-3__heading{
    font-size: 32px;
    line-height: 32px;
    margin-top:228px;
    font-weight: normal;
    color: #ffffff;
}
.screen-3__line{
    margin-top:32px;
    background-color: #f01400;
}
.screen-3__subheading{
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    margin-top:57px;
    font-weight: normal;
}
.screen-3__item{
    position: relative;
    top:160px;
    width: 530px;
    height: 70px;

 
}
.screen-3__item_pics{
    width: 62px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    
    margin-right:35px;
    float: left;
}
.screen-3__item_pics-i-1{
    border:4px solid #1f5975;
    color: #2294ff;
    border-radius: 50%;
}
.screen-3__item_pics-i-2{
    border: 4px solid #424d76;
    color: #4f7dfd;
    border-radius: 50%;
}
.screen-3__item_pics-i-3{
    border:4px solid #6b4146;
    color:#ff6060;
    border-radius: 50%;
}
.screen-3__item_pics-i-4{
    border: 4px solid #29535f;
    color: #29abe5;
    border-radius: 50%;
}
.screen-3__item_pics-i-5{
    border: 4px solid #3e4e40;
    color: #90bd4b;
    border-radius: 50%;
}
/*第四screen-3__item_pics-i-1屏*/
.screen-4{
    width: 100%;
    height: 640px;
    background-color: #f3f5f7;
    position: relative;

}
.screen-4__wrap{
    width: 1200px;
    height: 640px;
    margin: 0 auto;
    text-align: center;
}
.screen-4__heading{
   font-size: 40px;
   line-height: 40px;
   padding-top:90px;
   font-weight: normal;
   color: #07111b;

}
.screen-4__line{    
    left: 50%;
    margin-left:-25px;
    margin-top:38px;
    background-color: #f01400;    
}
.screen-4__subheading{
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  padding-top:57px;
  color: #07111b;
 
}

.screen-4__type{
  width:1120px;
  height: 80px;
  margin-left:80px;
  margin-top: 70px;
  position: relative;

}
.screen-4__type__item{
    width: 200px;
    height: 80px;
    float: left;
    margin-right: 80px;
    position: relative;
}
.screen-4__type__item__desc{
    font-size: 14px;
    margin-top:95px;


}
.screen-4__type__item_i_1{
  background: url(../img/sc4-1.png) no-repeat center;

}
.screen-4__type__item_i_2{
  background: url(../img/sc4-2.png) no-repeat center;
 
}
.screen-4__type__item_i_3{
  background: url(../img/sc4-3.png) no-repeat center;
 
}
.screen-4__type__item_i_4{
  background: url(../img/sc4-4.png) no-repeat center;

}
/*第五屏*/
.screen-5{
    width: 100%;
    height: 640px;
    position: relative;
    background:url(../img/sc5.jpg) no-repeat;
    background-size: cover;
}
.screen-5__wrap{
    width:1200px;
    height: 640px;
    margin: 0 auto;
    position: relative;
    text-align: center;

}
.screen-5__bgpic{
    width: 200px;
    height: 200px;
    position: absolute;
    top:100px;
    left:50%;
    margin-left:-100px;
    background:url(../img/sc5-1.png) no-repeat center;
    background-size: cover;
}

.screen-5__heading{
    
   font-size: 42px;
   line-height: 42px;
   padding-top:360px;
   font-weight: normal;
   color: #ffffff;
   
}
.screen-5__line{    
    left: 50%;
    margin-left:-25px;
    margin-top:30px;
    background-color: #ffffff;    
    

}
.screen-5__subheading{
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  padding-top:57px;
  color: #ffffff;

 
}

/*其他*/
.screen-ade{
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    position: relative;
    text-align: center;
    padding: 70px 0;
}
.screen-ade__button{
    display: inline-block;
    width: 238px;
    height: 58px;
    border:1px solid #707070;
    border-radius: 3px;
    line-height: 58px;
    font-size: 18px;
    text-align: center;
    color: #14191e;
}
.screen-ade__button:hover{
    color: #f01400;
}
/*页脚*/
.footer{
    width: 100%;
    height: 106px;
    background-color: #000;
    position: relative;
    text-align: center;
    color: #c8cdd2;
}
.footer__nav{
    margin-top:20px;
    display: inline-block;
}
.footer__nav__item{
   color: #c8cdd2;
   font-size: 11px;
   line-height: 38px;
   margin-right: 34px;
}
.footer__nav__item:hover{
    color: #f01400;
}






/*导航条*/
.header__logo,
.header__nav{
    transition: all 1s;
}
.header__logo_animate_init,
.header__nav_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.header__logo_animate_done,
.header__nav_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
/*第一屏*/
.screen-1__heading{
   transition: all 1s;
}
.screen-1__subheading{
    transition: all 1s 0.8s;
}
.screen-1__subheading_animate_init,
.screen-1__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__subheading_animate_done,
.screen-1__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}

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

.screen-2__line{
    transition: all 1s 1.5s;
}
.screen-2__man_animate_init,
.screen-2__line_animate_init{
    opacity: 0;
}

.screen-2__man_animate_done,
.screen-2__line_animate_done{
    opacity: 1;
}

/*定义帧动画*/
@keyframes shake{
    0%{
        
        transform: translate(0,100%);
    }
    50%{
        transform: translate(0,-20px);
    }
    70%{
        transform: translate(0,10px);
    }
    90%{
        transform: translate(0,-5px);
    }
    100%{
        transform: translate(0,0);
    }
}
.screen-2__rocket{
    transition: all 1s 2.5s;
}

.screen-2__rocket_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__rocket_animate_done{
    opacity: 1;
    animation: shake 1s 2.5s;
}

/*第三屏*/
/*大小标题*/
.screen-3__heading{
   transition: all 1s 0.5s;
}
.screen-3__subheading{
    transition: all 1s 1s;
}
.screen-3__subheading_animate_init,
.screen-3__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
/*下划线*/
.screen-3__line{
    transition: all 1s .6s;
}
.screen-3__line_animate_init{
    opacity: 0;
}
.screen-3__line_animate_done{
    opacity: 1;
}

/*大图片*/
.screen-3__bigpic{
    transition: all 1s;
}
.screen-3__bigpic_animate_init{
    opacity: 0;
    transform: scale(0);
}
.screen-3__bigpic_animate_done{
    opacity: 1;
    transform: scale(1);
}
/*四个圈*/
.screen-3__item{
    transition: all 1s 1.5s;
}
.screen-3__item_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__item_animate_done{
    opacity: 1;
    animation: shake 1s 1.5s;
}

/*定义帧动画*/
@keyframes breath{
    0%,100%{
        transition: scale(1.1);
    }
    50%{
        transition:scale(1);
    }
}
.screen-3__item_pics-i-1,
.screen-3__item_pics-i-2,
.screen-3__item_pics-i-3,
.screen-3__item_pics-i-4{
    transition: all 1s 1.5s;
}
.screen-3__item_pics-i-1_animate_init{
     
     transform:scale(1);
    
}
.screen-3__item_pics-i-1_animate_done{

     animation: breath 1s 1.5s ease-in-out;
}
/*第四屏*/
.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-4__heading{
   transition: all 1s;
}
.screen-4__line,
.screen-4__subheading{
    transition: all 1s 1s;
}
.screen-4__subheading_animate_init,
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__subheading_animate_done,
.screen-4__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}

.screen-4__line_animate_init{
    opacity: 0;
}
.screen-4__line_animate_done{
    opacity: 1;
}
.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init{
    opacity: 0;
    transform:scale(0);
}
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done{
    opacity: 1;
    transform: scale(1);
}

/*第五屏*/

.screen-5__bgpic{
    transition: all 1s;
}
.screen-5__heading{
   transition: all 1s 1s;
}
.screen-5__line,
.screen-5__subheading{
    transition: all 1s 1.5s;
}
.screen-5__subheading_animate_init,
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-5__subheading_animate_done,
.screen-5__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-5__line_animate_init{
    opacity: 0;
}
.screen-5__line_animate_done{
    opacity: 1;
}
.screen-5__bgpic_animate_init{
    opacity: 0;
    transform: scale(0.2);
}
.screen-5__bgpic_animate_done{
    opacity: 1;
    transform: scale(1);
}




var setScreenAnimateElements={//正则表达式
    '.screen-1':[
      '.screen-1__heading',
      '.screen-1__subheading',
    ]
    ,
    '.screen-2':[
      '.screen-2__heading',
      '.screen-2__subheading',
      '.screen-2__line',
      '.screen-2__rocket',
      '.screen-2__man',
    ]
    ,
    '.screen-3':[
      '.screen-3__heading',
      '.screen-3__subheading',
      '.screen-3__line',
      '.screen-3__bigpic',
      '.screen-3__item',
      '.screen-3__item_pics-i-1',
      '.screen-3__item_pics-i-2',
      '.screen-3__item_pics-i-3',
      '.screen-3__item_pics-i-4',
    ]
    ,
    '.screen-4':[
      '.screen-4__heading',
      '.screen-4__subheading',
      '.screen-4__line',
      '.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__line',
      '.screen-5__bgpic',
    ]
    ,
    'header':[
        '.header__nav',
        '.header__logo',
    ]
}


function setScreenAnimate(screenCls){
    var screen=document.querySelector(screenCls);//获取元素
    var animateElements=setScreenAnimateElements[screenCls];//获取动画元素
    var isSetAnimateClass=false;//是否有初始化子元素的样式
    var isAnimateDone=false;//当前屏幕下所有子元素的状态是DONE？
    

    screen.onclick=function(){
        if(isSetAnimateClass===false){
            for(var i=0;i<animateElements.length;i++){
            var elemnt=document.querySelector(animateElements[i]);//获取当前屏需要设置的元素，既当前screen-i，下的子元素，
            var baseCls=elemnt.getAttribute('class');//获取类名
            elemnt.setAttribute('class',baseCls+" "+animateElements[i].substr(1)+'_animate_init');//Substr是对象方法，指复制该对象的（按0开始算起的）后的字符。
            }
            isSetAnimateClass = true;//修改状态
            return;//一定要加
        }

         //切换所有animateElements 的 init->done;
        if(isAnimateDone===false){
            for(var i=0;i<animateElements.length;i++){
            var elemnt=document.querySelector(animateElements[i]);
            var baseCls=elemnt.getAttribute('class');
            elemnt.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));//replace是替换（“被替换的字符”，“替换的字符”）
            }
            isAnimateDone=true;
             return;
        }
         //切换所有animateElements 的 done->init;
            if(isAnimateDone===true){
            for(var i=0;i<animateElements.length;i++){
            var elemnt=document.querySelector(animateElements[i]);
            var baseCls=elemnt.getAttribute('class');
            elemnt.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
            }
           isAnimateDone=false;
             return;
        }
    }
}

for(k in setScreenAnimateElements){
    setScreenAnimate(k);
}

写回答

1回答

好帮手慕码

2019-11-16

同学你好，可以通过动画的形式去实现。建议如下：

http://img.mukewang.com/climg/5dcfb4380944ab4e06200622.jpg

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 40143 问题

查看课程

相似问题

呼吸灯是什么效果

回答 1

呼吸灯效果是啥意思

回答 1

呼吸灯是用帧动画吗 怎么实现？

回答 1

5个课程1秒后再出现，且有呼吸灯效果? 呼吸灯效果不是一暗一亮吗？怎么变成了一缩一放了?

回答 1

回答 1

打开慕课网App查看更多内容