按照国际惯例先放图
index.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>demo</<!-- 基本样式 --> link rel="stylesheet" href="style.css" 动画效果 ="animate.css"body 导航 header class="header"> div ="header_wrap"> ="header_logo">XX手机divnav ="header_nav"> a href="javascript:;" class="header_nav_item header_nav_item_active">首页a="header_nav_item">外观>配置>型号>说明="header_nav_item header_nav_item_btn">立即购买="header_nav_tip"></navheader 第一屏 ="screen_1"h2 ="screen_1_heading screen_1_heading_animate_init"><b> 让你的生活更精彩h2="screen_1_phone screen_1_phone_animate_init"="screen_1_shadow screen_1_shadow_animate_init" 第二屏 ="screen_2"="screen_2_title">优美的设计，更令人着迷h3 ="screen_2_subtitle">采用受欢迎的设计，让它更加出色。br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。h3="screen_2_phone"="screen_2_phone_point screen_2_phone_point1">高清摄像="screen_2_phone_point screen_2_phone_point2">超薄机身="screen_2_phone_point screen_2_phone_point3">大屏显示 第三屏 ="screen_3"="screen_3_wrap"="screen_3_title">外形小巧，功能强大的手机="screen_3_subtitle"> 款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。="screen_3_phone"="screen_3_feature"="screen_3_feature_item"> ="screen_3_feature_item_big">5.7="screen_3_feature_item_small">英寸大屏>1200>万像素>3D>touch>A9>处理器 第四屏 ="screen_4"="screen_4_wrap"="screen_4_heading">丰富的手机型号="screen_4_subheading">找到适合你的手机="screen_4_type"="screen_4_type_item screen_4_type_item_i_1"="screen_4_type_item_color">慕课红="screen_4_type_item_storage">16G/32G/64G="screen_4_type_item screen_4_type_item_i_2">土豪金="screen_4_type_item screen_4_type_item_i_3">太空灰="screen_4_type_item screen_4_type_item_i_4">绅士黑 第五屏 ="screen_5"="screen_5_heading">游戏、学习、拍照、有这一部就够了="screen_5_subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。="screen_5_bg" 底部 ="screen_buy"="screen_buy_btn"="javascript:;"footer ="footer"> © 2019 test.com 京ICP备xxxxxxxx号 footer 侧导航 ="outline"="outline_item outline_item_active"="outline_item"script src="script.js"scripthtml>
style.css
*{ margin: 0; padding: 0; } body{ background-color: #fff; font-size: 12px; font-family: "Microsoft Yahei","微软雅黑" } a{ text-decoration: none; } /*导航*/ header{ #f7f7f7; } .header_wrap{ height:80px; width:1200px;0 auto; position: relative; } .header_logo{ background:url(img/logo.png) no-repeat;150px;40px; line-height: 40px; text-indent:50px; absolute; top:50%; margin-top:-20px; font-size:20px; } .header_nav{ right:25px;-20px; } .header_nav_item{ display: block; float: left; padding-left:48px; color:#292f35;14px;30px; text-align: center; .header_nav_item_active{#f01400; } .header_nav_item_active::after{ content:' '; position: absolute; width:31px; height:2px; background-color: #f01400; top:35px; left:-1px; } .header_nav_item_btn{90px;#07111b;white; border-radius:5px;0 5px; margin-left:48px; } 第一屏 .screen_1{ 800px; #e7e7e7; relative; overflow: hidden;url(img/bg-screen-1.png) no-repeat center; background-size: cover; } .screen_1_heading{ font-weight: normal;46px; #4d555d; padding-top: 152px; } .screen_1_heading b{ #f01400; normal; } .screen_1_phone{ 1375px; 305px;url(img/screen-1-phone.png) no-repeat center; left: 50%; -687px; bottom: 180px; z-index: 2; } .screen_1_shadow{ 1233px; 411px;url(img/screen-1-shadow.png) no-repeat center; -616px; 30px; 1; opacity: .8; } 第二屏 .screen_2{56px;#fafafa; } .screen_2_title{#f01414;normal; } .screen_2_subtitle{16px;normal;15px;2em; margin-bottom:40px; } .screen_2_phone{url(img/screen-2-phone.png) top center no-repeat;579px;hidden; .screen_2_phone_point{ 230px; 48px; padding-right: 20px; url(img/icon-point-right.png) right no-repeat; } .screen_2_phone_point1{ 146px; -56px; } .screen_2_phone_point2{ url(img/icon-point-left.png) left no-repeat; 25px; 235px; } .screen_2_phone_point3{ 319px; 135px; } 第三屏 .screen_3{803px;url(img/bg-screen-3.png) no-repeat;hidden; } .screen_3_wrap{#fff; .screen_3_title{84px; .screen_3_subtitle{34px;30px; } .screen_3_phone{ url(img/screen-3-phone.png) top right no-repeat; 657px; 200px; 90%; } .screen_3_feature{400px;absolute; top:380px;0; } .screen_3_feature_item{176px;125px; border:1px solid #fff; margin-right:22px;25px; } .screen_3_feature_item_big{48px; } .screen_3_feature_item_small{16px; } 第四屏 .screen_4{ #ffffff; hidden; } .screen_4_wrap{ 1200px; auto; 0 auto; .screen_4_heading{ 135px; .screen_4_subheading{ #464a4f; 29px; 28px; .screen_4_type{ 1260px; 270px; 304px; 30px; } .screen_4_type_item{ 220px; 90px; .screen_4_type_item_color{ 100%; 14px; font: #2c3238; bottom: -44px; } .screen_4_type_item_i_1{ url('img/phone-1.png') no-repeat left top; } .screen_4_type_item_i_2{ url('img/phone-2.png') no-repeat left top; } .screen_4_type_item_i_3{ url('img/phone-3.png') no-repeat left top; } .screen_4_type_item_i_4{ url('img/phone-4.png') no-repeat left top; } .screen_4_type_item_storage{ #a4a9ae; -66px; } 第五屏 .screen_5{ #d9dde1; } .screen_5_heading{ 130px; .screen_5_subheading{ #2c3137; .screen_5_bg{ 1920px; 433px;url(img/bg-screen-5.png) no-repeat center; background-size: contain; -960px; -100px; } 底部 .screen_buy{ 80px; 120px 0; #2b333b url('img/bg-screen-buy.png') center no-repeat; center; } .screen_buy_btn{ 240px; 24px; #f01414; inline-block; 3px; transition: all .5s; } .screen_buy_btn:hover{ Box-shadow: 0px 0px 10px rgba(0,.5); } .footer{ #07111b; } 侧导航 .outline{66px; fixed;0;-98px; 0 0 5px rgba(0,.1); } .outline_item{#93999f;12px;45px; border-bottom:1px solid #c3c6c9;0 20px; } .outline_item:last-child{none; } .outline_item_active{导航滑动门特效 .header_nav_tip{2px;#f01400;47px;all 1s; }
animate.css
*/ screen_1_heading .screen_1_heading{ transition: all 1s; } .screen_1_heading_animate_init{ opacity: transform:translate(0,100%); } .screen_1_heading_animate_done{screen_1_phone .screen_1_phone{ .screen_1_phone_animate_init{ .screen_1_phone_animate_done{screen_1_shadow .screen_1_shadow{ .screen_1_shadow_animate_init{ .screen_1_shadow_animate_done{screen_2_title .screen_2_title{ .screen_2_title_animate_init{ translate(0,1)"> .screen_2_title_animate_done{screen_2_subtitle .screen_2_subtitle{ .screen_2_subtitle_animate_init{ .screen_2_subtitle_animate_done{screen_2_phone .screen_2_phone{ .screen_2_phone_animate_init{ .screen_2_phone_animate_done{screen_2_phone_point .screen_2_phone_point{ all 1s 1s; } .screen_2_phone_point1_animate_init{ translate(-100%,0); } .screen_2_phone_point2_animate_init,.screen_2_phone_point3_animate_init{ translate(100%,1)"> .screen_2_phone_point_animate_done{screen_3_title .screen_3_title{ .screen_3_title_animate_init{ .screen_3_title_animate_done{screen_3_subtitle .screen_3_subtitle{ .screen_3_subtitle_animate_init{ .screen_3_subtitle_animate_done{screen_3_phone .screen_3_phone{ .screen_3_phone_animate_init{ .screen_3_phone_animate_done{screen_3_feature .screen_3_feature{ .screen_3_feature_animate_init{ scale(.5); } .screen_3_feature_animate_done{ scale(1); } screen_3_feature_item .screen_3_feature_item{ all .5s; cursor: pointer; } .screen_3_feature_item:hover{ scale(1.1); border-color: #fff; } screen_4_heading .screen_4_heading{ .screen_4_heading_animate_init{ .screen_4_heading_animate_done{screen_4_subheading .screen_4_subheading{ .screen_4_subheading_animate_init{ .screen_4_subheading_animate_done{screen_4_type_item_i_1 .screen_4_type_item_i_1{ all 1s .5s; } .screen_4_type_item_i_1_animate_init{ 0; } .screen_4_type_item_i_1_animate_done{ 1; } screen_4_type_item_i_2 .screen_4_type_item_i_2{ .screen_4_type_item_i_2_animate_init{ .screen_4_type_item_i_2_animate_done{screen_4_type_item_i_3 .screen_4_type_item_i_3{ all 1s 1.5s; } .screen_4_type_item_i_3_animate_init{ .screen_4_type_item_i_3_animate_done{screen_4_type_item_i_4 .screen_4_type_item_i_4{ all 1s 2s; } .screen_4_type_item_i_4_animate_init{ .screen_4_type_item_i_4_animate_done{ 1; } screen_5_heading .screen_5_heading{ .screen_5_heading_animate_init{ .screen_5_heading_animate_done{screen_5_subheading .screen_5_subheading{ .screen_5_subheading_animate_init{ .screen_5_subheading_animate_done{screen_5_bg .screen_5_bg{ .screen_5_bg_animate_init{ .screen_5_bg_animate_done{帧动画 @-webkit-keyframes bounce{ 0%,100%{ transform:scale(0); } 50%{scale(1); } } 第二屏小圆点呼吸效果 .screen_2_phone_point:before,.screen_2_phone_point:after{ display: width:20px; height: content:' '; background-color: rgba(255,.4); top: position: -webkit-animation:bounce 2s infinite; border-radius: 50%; } .screen_2_phone_point:before{bounce 2s infinite 1s; } .screen_2_phone_point1:before,.screen_2_phone_point1:after{ left:229px; } 导航条动画样式 .header{ .header_status_black{ background: rgba(0,.5); 0px; right: z-index: 3; } .header_status_black .header_nav_item,.header_status_black .header_logo{ color: #fff; } .header_status_black .header_nav_item_active{#f01400; } .header_status_black .header_nav_item:hover{ all 1s; red; } 侧导航动画效果 .outline{ .outline_status_in{ .outline_item{ all 1s; }
script.js
// 基本函数封装 获取元素 var getElem = function( selector ){ return document.querySelector(selector); } var getAllElem = document.querySelectorAll(selector); } 获取元素的样式 var getCls = ( element ) { return element.getAttribute('class'); } 设置元素的样式 var setCls = ( element,cls){ return element.setAttribute('class',cls); } 为元素添加样式 var addCls = var baseCls = getCls(element); if( baseCls.indexOf(cls) === -1){ setCls(element,baseCls+' '+cls); 注意空格 } ; } 为元素删减样式 var delCls = if( baseCls.indexOf(cls) > -1){ 更精确的需要用正则表达式,因为这里只用于切换 _animate_in 所以没事 setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') ); } ; } 定义哪些元素拥有动画 var animateEles={ '.screen_1':[ '.screen_1_heading''.screen_1_shadow' ],'.screen_2':[ '.screen_2_title''.screen_2_phone''.screen_2_phone_point2''.screen_3':[ '.screen_3_title''.screen_3_phone''.screen_4':[ '.screen_4_heading''.screen_4_type_item_i_1''.screen_4_type_item_i_3''.screen_5':[ '.screen_5_heading''.screen_5_bg' ] }; 给当前屏元素添加初始化样式 setInit(screenEle){ var screen=document.querySelector(screenEle);获取当前屏 var animateEle=animateEles[screenEle]; 获取需要添加动画的元素 for(var i=0;i<animateEle.length;i++){ var ele=document.querySelector(animateEle[i]); var baseCls=ele.getAttribute('class'); var newCls=baseCls+' '+animateEle[i].substr(1)+'_animate_init'; ele.setAttribute('class'设置所有元素开始动画 startAnimate(screenEle){ var newCls=baseCls.replace('_animate_init','_animate_done'); ele.setAttribute('class'第一步，页面所有元素初始化 window.onload = () { for(k in animateEles){ if(k=='.screen_1'){ continue; } setInit(k); } } 第二步，滚动到哪里就播放哪里 var navs=getAllElem('.header_nav_item'); var outlines=getAllElem('.outline_item'var navTip=getElem('.header_nav_tip'); 切换主导航对应样式 var switchActive=(idx){ var i=0;i<navs.length;i++){ delCls(navs[i],'header_nav_item_active'); navTip.style.left=0+'px'; } addCls(navs[idx],1)">); navTip.style.left=(idx*78)+'px'; var i=0;i<outlines.length;i++){ delCls(outlines[i],'outline_item_active'); } addCls(outlines[idx],1)">默认导航0高亮 switchActive(0); window.onscroll=(){ var top=document.body.scrollTop||document.documentElement.scrollTop; console.log(top); 导航条样式变动 if( top > 100 ){ addCls( getElem('.header'),'header_status_black' ); addCls( getElem('.outline'),'outline_status_in' ); }else{ delCls( getElem('.header'),1)"> ); delCls( getElem('.outline'),1)"> ); switchActive(0); } if(top>1){ startAnimate('.screen_1'); } if(top>800*1-200){ startAnimate('.screen_2'); switchActive(1if(top>800*2-200){ startAnimate('.screen_3'); switchActive(2if(top>800*3-200){ startAnimate('.screen_4'); switchActive(3if(top>800*4-200){ startAnimate('.screen_5'); switchActive(4); } } 第三步，双向绑定 封装导航跳转函数 var setJump=(i,lib){ lib[i].onclick=(){ document.body.scrollTop=i*800; document.documentElement.scrollTop=i*800; } } 绑定主导航 ){ setJump(i,navs); } 绑定侧导航 第四步，滑动门特效 var setTip=鼠标移入 lib[i].onmouSEOver=(){ navTip.style.left=(i*78)+'px'; } var activeIdx=0; 鼠标移出 lib[i].onmouSEOut=(){ if(getCls(lib[i]).indexOf('header_nav_item_active')>-1){ activeIdx=i; break; } } navTip.style.left=(activeIdx*78)+'px'var i=0;i<navs.length-1;i++){ setTip(i,navs); } setTimeout((){ startAnimate('.screen_1'); },200);
其余杂碎知识点补充：
前端切图
透明背景图处理：
选择指定图层（ctrl+enter）
拖拽到一个新建文件的透明图层中(ctrl+c ctrl+n ctrl+v)
点击图像-裁切（基于透明像素）
多个图层的，可以先ctrl+e合并图层，再按照以上方法拖拽出来处理
非透明背景图可以直接裁剪完另存为
同类型图片可以做成雪碧图
BEM设计模式
模块（没有前缀，多个单词用-分割）
元素（在模块之后，多个层级以_连接）
css实现动画的两种方式：
1、 transition:all 1s;
2、 animation:move 2s indinite ease-in-out .5s;
@keyframes move{
0%{transform:rotate(0deg)}
50%{transform:rotate(2deg)}
100%{transform:rotate(0deg)}
}
获取滚动高度的兼容性写法
var top=document.body.scrollTop||document.documentElement.scrollTop;
