之前已经完成了静态页面的开发，接下来是网页动态效果制作
css实现动画的两种方式：
1、transition: all 1s;
2、animation: move 1s infinite ease-in-out .5s;
@keyframes move{
0%{ transform: rotate(0deg); }
40%{ transform: rotate(45deg); }
100%{ transform: rotate(0deg); }
}
两种遍历的方式，遍历对象 { } 遍历数组 [ ]
for(k in obj){
do (k);
}
for(var i=0; i<obj.length; i++){
do( obj[i] );
}
css动画测试
首先新建一个animate.css专门用于存放动画效果
.screen-1-heading{ transition:all 1s; } .screen-1-heading-init{ opacity: 0;transform:translate(0,100%); } .screen-1-heading-done{ 1;/*# sourceMappingURL=animate.css.map */
新建一个动画测试脚本 test.js
// 需要设置动画的元素 var animateElements={ ".screen-1":[ ".screen-1-heading",".screen-1-phone" ] } 设置动画 function setAnimate(screenName){屏的类名，如： ".screen-1" var screen=document.querySelector(screenName);获取哪一屏 var screenEles=animateElements[screenName];获取该屏下要动画的所有元素 var isInit=false; 动画是否初始化 var isDone=false;动画是否完成 screen.onclick=function(){ 初始化 if(isInit===false){ for(var i=0,len=screenEles.length;i<len;i++){ var newCls=screenEles[i].substr(1)+"-init"; var screenEle=document.querySelector(screenEles[i]);某个要动画的元素 var baseCls=screenEle.getAttribute("class");获取原来的类 screenEle.setAttribute("class",baseCls+" "+newCls);添加init类 } isInit=true; return; } 完成动画 if(isDone===){ 获取原来的类 var newCls=screenEles[i].replace("-init","-done").substr(1); screenEle.setAttribute("class",newCls); } isDone=切换done到init var newCls=screenEles[i].replace("-done","-init").substr(1; } } } setAnimate(".screen-1");
补充：给容器设置overflow: hidden;
可以保证元素在进行动画的过程中，不会占用别的屏的空间
div 可以添加hover伪类制作动画，但是为了更好的兼容性，建议外面加上a标签，display设置为block，来添加hover 效果
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</link rel="stylesheet" href="base.css"="style.css"="animate.css"body<!-- 头部 --> header> div class="header-wrap"> ="header-logo">微课手机divnav ="header-nav"> a href="javascript:void(0);" class="header-nav-item header-nav-item-active">外观a="header-nav-item">配置>型号>说明>其他产品="header-nav-item header-nav-item-button">立即购买nav 第一屏 ="screen-1"h2 ="screen-1-heading"><span> 让你的生活更精彩h2="screen-1-phone"></="screen-1-shadow" 第二屏 ="screen-2"="screen-2-wrap"="screen-2-heading">优美的设计，更令人着迷h4 ="screen-2-subheading">采用受欢迎的设计，让它更加出色。br> 款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。h4="screen-2-phone"="screen-2-point screen-2-point-i1">高清摄像="screen-2-point screen-2-point-right screen-2-point-i2">超薄机身="screen-2-point screen-2-point-right screen-2-point-i3">大屏显示 第三屏 ="screen-3"="screen-3-wrap"="screen-3-heading"="screen-3-subheading"="screen-3-phone"="screen-3-detail"="screen-3-detail-item"> ="screen-3-detail-num">5.7="screen-3-detail-desc">英寸大屏>1200>万像素>3D>Touch>A9>处理器 第四屏 ="screen-4"="screen-4-wrap"="screen-4-heading">丰富的手机型号="screen-4-subheading">找到适合你的手机="screen-4-phone"="screen-4-phone-item screen-4-phone-i1"="screen-4-phone-color">微课红="screen-4-phone-model">32G/64G/138G="screen-4-phone-item screen-4-phone-i2">土豪金="screen-4-phone-item screen-4-phone-i3">太空灰="screen-4-phone-item screen-4-phone-i4">绅士黑 第五屏 ="screen-5"="screen-5-heading">游戏、学习、拍照，有这一部就够了="screen-5-subheading" 看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。 ="screen-5-bg" 第六屏 ="screen-6"button ="screen-6-btn"button 底部 footer>© 2020 test.com 浙ICP备00000000号> script src="test.js"scripthtml>
base.css
*{ margin:0; padding:0; } a{ text-decoration: none; color:#44484d; } ul{ list-style:none; } body{ h2{ font-size:48px; font-weight:lighter; padding-top:81px; padding-bottom:15px; } h4{16px; line-height:30px;normal;15px; } # sourceMappingURL=base.css.map */
style.css
头部*/ header{ background:#f7f7f7; width:100%; height:80px; } .header-wrap{1200px;0 auto; position: relative; } .header-logo{140px;39px; margin-left:24px;url(img/logo.png) left center no-repeat; background-size:39px 39px; text-indent:51px; absolute; top:50%; margin-top:-20px;20px; } .header-nav{ right:14px; } .header-nav-item{ display: block; float:left;45px; } .header-nav-item-active{#f04747; .header-nav-item-active::after{ content:"";2px; left: background-color: #f04747; } .header-nav-item-button{90px;#07111b;#f4f4f5; text-align: center; border-radius:3px; } 第一屏 .screen-1{795px;url(img/screen-1-bg.png) no-repeat;cover; .screen-1-heading{138px;94px;#4d555d; } .screen-1-heading span{#f04747; } .screen-1-phone{url(img/screen-1-phone.png) center no-repeat;1375px;305px;-687px; bottom:180px; z-index:2; } .screen-1-shadow{url(img/screen-1-shadow.png) center no-repeat;1183px;367px;-591px;1; } 第二屏 .screen-2{800px;#fafafa; } .screen-2-wrap{ relative; overflow:hidden; } .screen-2-heading{ .screen-2-subheading{ .screen-2-phone{url(img/screen-2-phone.png) center no-repeat;928px;530px;-464px; .screen-2-point{104px; padding-right:97px;url(img/screen-2-point-left.png) center right no-repeat; absolute; } .screen-2-point-right{ padding-left:url(img/screen-2-point-right.png) center left no-repeat; } .screen-2-point-i1{160px;-153px; } .screen-2-point-i2{40px;150px; } .screen-2-point-i3{340px;40px; } 第三屏 .screen-3{#fafafa;url(img/screen-3-bg.png) no-repeat; .screen-3-wrap{0 50px;#fff; overflow: .screen-3-phone{url(img/screen-3-phone.png) top right no-repeat;767px;576px; .screen-3-detail{152px;333px; } .screen-3-detail-item{127px; border:1px solid #cd6d6f;3px; margin-right: margin-bottom:18px; } .screen-3-detail-num{24px; } .screen-3-detail-desc{5px; } 第四屏 .screen-4{800px; } .screen-4-wrap{ .screen-4-heading{120px;21px; .screen-4-subheading{55px; } .screen-4-phone{1148px;355px; } .screen-4-phone-item{218px;355px;92px;url(img/screen-4-phone.png) -26px top no-repeat; } .screen-4-phone-i1{ background-position:-25px 0; } .screen-4-phone-i2{-301px 0; } .screen-4-phone-i3{-574px 0; } .screen-4-phone-i4{-846px 0; .screen-4-phone-color{307px;16px; } .screen-4-phone-model{9px;12px;#d8dadc; } 第五屏 .screen-5{ background-color: #d9dde1; .screen-5-heading{ .screen-5-subheading{ .screen-5-bg{1918px;433px;-959px;url(img/screen-5-bg.png) center no-repeat; } 第六屏 .screen-6{202px; #d9ddd1;url(img/screen-6-bg.png);118px; } .screen-6-btn{243px;78px;#f01414;none; box-shadow:0 0 10px rgba(0,.5); inline-block; cursor:pointer; } 底部 footer{80px; #07111b;lighter; } # sourceMappingURL=style.css.map */
animate.css
.screen-1-phone{ .screen-1-phone-init{ .screen-1-phone-done{ .screen-1-shadow{ .screen-1-shadow-init{ .screen-1-shadow-done{ .screen-2-heading-init{ .screen-2-heading-done{ .screen-2-subheading{ .screen-2-subheading-init{ .screen-2-subheading-done{ .screen-2-phone{ .screen-2-phone-init{ .screen-2-phone-done{ .screen-2-point{all 1s .5s; } .screen-2-point-i1-init{translate(-100%,1)"> .screen-2-point-i1-done{ .screen-2-point-i2-init{translate(100%,1)"> .screen-2-point-i2-done{ .screen-2-point-i3-init{ .screen-2-point-i3-done{圆点呼吸动画 .screen-2-point::before,.screen-2-point::after{20px;rgba(255,1)"> animation:bounce 2s infinite; } .screen-2-point::before{ animation:bounce 2s infinite 1s; } .screen-2-point-i1::before,.screen-2-point-i1::after{ top: left:auto; right:0; } @keyframes bounce{ 0%,100%{ transform:scale(0); } 50%{ transform:scale(1); } } .screen-3-heading{ .screen-3-heading-init{ .screen-3-heading-done{ .screen-3-subheading{ .screen-3-subheading-init{ .screen-3-subheading-done{ .screen-3-phone{ .screen-3-phone-init{ .screen-3-phone-done{ .screen-3-detail{ .screen-3-detail-init{scale(.5); } .screen-3-detail-done{scale(1); } 鼠标悬停时放大效果 all .5s;cursor: pointer; } .screen-3-detail-item:hover{scale(1.1);border-color:#fff; } .screen-4-heading-init{ .screen-4-heading-done{ .screen-4-subheading{ .screen-4-subheading-init{ .screen-4-subheading-done{ .screen-4-phone-i1{ .screen-4-phone-i1-init{ 0; } .screen-4-phone-i1-done{ 1; } .screen-4-phone-i2{all 1s 1s; } .screen-4-phone-i2-init{ .screen-4-phone-i2-done{ .screen-4-phone-i3{all 1s 1.5s; } .screen-4-phone-i3-init{ .screen-4-phone-i3-done{ .screen-4-phone-i4{all 1s 2s; } .screen-4-phone-i4-init{ .screen-4-phone-i4-done{ 1; } .screen-5-heading-init{ .screen-5-heading-done{ .screen-5-subheading{ .screen-5-subheading-init{ .screen-5-subheading-done{ .screen-5-bg{ .screen-5-bg-init{ .screen-5-bg-done{*/
test.js
],".screen-2":[ ".screen-2-heading":[ ".screen-3-heading":[ ".screen-4-heading":[ ".screen-5-heading"var newCls=baseCls.replace("-init","-done"var newCls=baseCls.replace("-done","-init"; } } } for(k in animateElements){ setAnimate(k); }
网页动态效果完成~
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上...