Chrome浏览器DevTools(F12)的NetWork页签下,访问某个网站的时候会把所有的请求显示出来,点击某个请求就会出来上图所示的一个面板,本文主要是Timing相关的一些内容。下面是图片显示内容的一些解释及程序开发时可能的优化时间办法。
Queued at 990.27ms:表示该请求加入到请求队列中的时刻。
Started at 1.00s:表示请求开始处理的时刻。
Queueing:表示请求从加入到请求队列中排队花费的时间。原因可能由于该请求被渲染引擎认为是优先级比较低的资源、服务器不可用、 超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6),
优化办法: 1、减少HTTP请求,使用CSS雪碧图、内联图片(不宜使用过大的图片)、合并js文件和css文件表等。 2、异步请求,减少阻塞。
Stalled:请求在可以被发送出去之前的等待时间(阻塞时间),一般是等待可复用的TCP连接释放的时间。浏览器对于单个域名只能同时建立4~6个TCP连接(不同浏览器实现有差异)。
优化办法:可以将一些资源分放到多台主机上,增大并发数。
Proxy Negotiation:浏览器和代理服务器连接的协商时间。
DNS Lookup:域名解析花费的时间。
优化办法:可以缓存DNS。
Initial Connection:建立TCP连接花费的的时间,包括TCP握手/重试和协商SSL(包含SSL时间)。
优化办法:使用长连接,复用已有连接。
SSL:花费在完成SSL上的时间。
Request sent:发送请求花费的时间。时间通常很短,大多数情况不会超过1毫秒(取决于网络带宽等因素),基本不需要优化。
Waiting (TTFB):从发出请求到接收到响应第一个字节经过的时间,包括网络延迟时间。
优化办法:1、可以使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,如果这个时间花费比较长,就应该考虑对网络进行性能优化了。2、如果是ajax请求,重点可能就是代码层面的优化了。
Content Download:从接收响应到响应接收完成花费的时间。
优化办法:1、可以考虑针对部分内容进行压缩,如js文件压缩(jquery.js换成jquery.min.js)、gzip等,减少响应数据大小。2、对于变化不频繁的资源可以采用If-Modified-Since和Last-Modified等,让服务器会返回304,不返回响应数据。
当然如果不限制使用的语言,那实现的方法有很多啦,简单的javaScript语言就可以很容易实现,当然使用框架的话就会更加简单啦。现在让我们用一些更简单单纯的CSS语言来实现。
1、素材:云层
image:云层1.png 云层2.png 云层3.png 也就是需要几张不同的云层图片。
云层1.png
云层2.png
云层3.png
这看似什么也没有的云层,能作出这样美丽的变化图,也是一种美的艺术。
细看之下的云层
2、文档编辑软件:Sublime Text3
Sublime Text3 是一款非常强大的,且非常好用前端常用开发工具之一。大家可以尝试一下。
界面
快捷方式
3、HTML部分: 放置云层图片
主要实现三张图片的布局,所以用三个div标签即可。
<div class="sky"> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div>
4、CSS部分:
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。而且为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
通过在设定的开始时间和结束时间之间的特定时间段,设置背景的随时间的样式变换来实现。
第一部分:CSS常见兼容性问题解决
html,body{ margin:0; padding:0; height:100%; }
第二部分:CSS中动画标签animation 属性兼容性问题解决:
-webkit-animation:; //代表Safari、Chrome等浏览器的私有属性 -moz-animation: ; //代表火狐firefox浏览器私有属性 -o-animation: ; //代表欧朋Opera浏览器私有属性 -ms-animation:; //代表IE浏览器的私有属性 animation: ;//自身兼容IE10、Firefox 以及 Opera 等浏览器。
还有其他CSS兼容性问题可参考:CSS样式浏览器兼容性问题归纳
该标签由三部分组成:
1、关键帧(keyframes) - 定义动画在不同阶段的状态。
2、动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函 数式去播放动画等。(可以类比音视频播放器)
3、css属性 - 就是css元素不同关键帧下的状态。
Animation
@Keyframes属性
animation-timing-function
-webkit-animation: sky_background 50s ease-out infinite;/*动画过程 时间 以慢速结束 无限循环*/ -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等浏览器内核,将其定义为3d转换*/
div盒子的五大主要属性:height、width、padding、margin、border。
div盒子常用布局属性:position: ; 、overflow: ; 等
.sky { height: 100%; background: #007fd5; position: relative; /*相对定位*/ overflow: hidden; /*超出隐藏*/ -webkit-animation: sky_background 50s ease-out infinite;/ *动画播放过程:50s(播放时长)以慢速结束(ease-out) 无限循环(infinite)*/ -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); //-webkit- Safari、Chrome等 -ms-transform: translate3d(0, 0, 0); //-ms- 代表IE浏览器的私有属性 -o-transform: translate3d(0, 0, 0);//-o- 代表欧朋Opera浏览器私有属性 transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是为了在播放之时保证能够充分的衔接。
2、position:absolute; 绝对定位。
.sky .clouds_one { background: url("../images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%;// -webkit-animation: cloud_one 50s linear infinite; //linear:匀速 -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是为了在播放之时保证能够充分的衔接。
2、position:absolute; 绝对定位。
.sky .clouds_two { background: url("../images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是为了在播放之时保证能够充分的衔接。
2、position:absolute; 绝对定位。
.sky .clouds_three { background: url("../images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
开始-中间-结束按钮 转化为 0%--50%--100%,我们又可叫做进度条。在不同阶段设置不同的背景色,是整个过程 呈现渐变动画状态。
注意:@ :千万不能丢掉
@-webkit-keyframes sky_background { //可以把其他几个兼容内核按照这个模板罗列 0% { //-o- 、-ms-、-moz- 和自身兼容 background: #007fd5; // 起点 color: #007fd5 ; //起点 } 50% { background: #000; //转折点 color: #a3d9ff ; //转折点 } 100% { background: #007fd5; //起点 color: #007fd5; //起点 } }
云层设置只用设置开始和结束的位置即可
@-webkit-keyframes cloud_one { //同上 0% { left: 0 } 100% { left: -200% //保证完美衔接 } } @-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } }
经过这些简单的设置,一个云彩变换的动画就可以展示出来了。 总结一下用到的动画关键属性:
animation:
animation: name duration timing-function delay iteration-count direction;
transform:
transform: none|transform-functions;
keyframes:
@keyframes animationname {keyframes-selector {css-styles;}/*0%{} 50%{} 100%{}*/}
position:
position:absolute /relative;
注意: 一般动画animation 和 @KeyFrames是联合使用的。
点击扩展链接可查看源码。
本文部分内容参考网络,如有错误,感谢指出,如有侵权,请联系修改。
1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
综合练习:
制作鼠标移入图片时,图片说明滑入的效果
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
举例:(翻面效果)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻面</title> <style type="text/css"> .box{ width:300px; height:272px; margin:50px auto 0; transform-style:preserve-3d; position:relative; } .box .pic{ width:300px; height:272px; position:absolute; background-color:cyan; left:0; top:0; transform:perspective(800px) rotateY(0deg); backface-visibility:hidden; transition:all 500ms ease; } .box .back_info{ width:300px; height:272px; text-align:center; line-height:272px; background-color:gold; position:absolute; left:0; top:0; transform:rotateY(180deg); backface-visibility:hidden; transition:all 500ms ease; } .box:hover .pic{ transform:perspective(800px) rotateY(180deg); } .box:hover .back_info{ transform:perspective(800px) rotateY(0deg); } </style> </head> <body> <div class="box"> <div class="pic"><img src="images/location_bg.jpg"></div> <div class="back_info">背面文字说明</div> </div> </body> </html>
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
理解练习:
1、风车动画
2、loading动画
3、人物走路动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>走路动画</title> <style type="text/css"> .box{ width:120px; height:180px; border:1px solid #ccc; margin:50px auto 0; position:relative; overflow:hidden; } .box img{ display:block; width:960px; height:182px; position: absolute; left:0; top:0; animation:walking 1.0s steps(8) infinite; } @keyframes walking{ from{ left:0px; } to{ left:-960px; } } </style> </head> <body> <div class="box"><img src="images/walking.png"></div> </body> </html>
动画中使用的图片如下:
CSS3圆角
设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;
同时分别设置四个角: border-radius:30px 60px 120px 150px;
设置四个圆角相同:
border-radius:50%;
rgba(新的颜色值表示法)
1、盒子透明度表示法:
.box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); }
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度
*请认真填写需求信息,我们会在24小时内与您取得联系。