请求处理中...
请求处理中...
四.切图质量标准
切图质量的好坏可以从如下几个方面来判断：常见的比如：
1.纯色背景色：用CSS2的background-color来实现；
2.渐变背景色：用background-image配合CSS3的渐变属性（线性渐变linear-gradient、径向渐变radial-gradient）来实现；
3.边框颜色：用CSS2的border-color来实现，另外边框线型可以用border-style实现，如果边框颜色特别花哨甚至有精妙的图案，那就只能用图片加border-image来实现；
4.背景投影/阴影：用CSS3的box-shadow实现，可以实现不同样式颜色的阴影；
5.椭圆等不规则图形：这个难度相对较大，用CSS3的圆角（border-radius）、变换（transform）来实现，当然我个人对于一些图标喜欢用SVG来做，SVG的语法和CSS、HTML极其类似，入门学习（点击直达）http://w3school.com.cn/svg一小时左右即可。
五.图片格式的选择
常见的网络图片格式有：JPG/JPEG、GIF、PNG、SVG，对于这些图片格式的比较如下表（每种格式不考虑同种格式版本的差异）：
以下是自身从实践中总结的几个要点：
1.logo统一切成png透明度的。
2.一般情况下临时图、ad、banner图用jpg格式，色彩丰富的、大图切成jpg。
3.在保证图片的画质情况下，图片的大小越小越好。
4.颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24。
5.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的。
（IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）
6.PS中裁剪完成后ctrl+shift+alt+s 进行保存为web可用格式。
7.一般来说SVG格式的体积最小，但是IE仅IE9及以上原生支持。
六.css雪碧图
从网页体积来看，切图必然是切得小一些更好，比如能切1像素宽然后repeat的，就不要切出一长条。重复的图形能切一个循环，就不要切n个循环。图片越小，存储量越小，对网络的负担也相应会小。
但是如果一堆小图片在一个网页中加载，会产生大量的HTTP请求，从而拖慢网页加载速度，这时候就需要考虑把小图片合并为大图片，只进行一次加载，可以有效的减少http请求数量，加速内容显示，从而提高效率。
所谓css sprite，就是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位（background-position：x定位点 y定位点）到要显示的位置，因此也叫“图片拼合”技术。
如：.div{ background:url(abc.jpg) no-repeat -30px -50px;}。
具体怎么切，其实还需要看网页布局，因此切图和HTML静态页面制作不能割裂开来，否则切但的图和静态页面不在一个频道上，会导致返工。
在此推荐一款工具自动生成sprite：TexturePackerGUI，可以快速拼合出雪碧图，并且生成出对应css，使用非常方便。
【动画交互期】
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，总结为以下几点： 流量、功耗与流畅度。
在PC时代我们更多的是考虑体验上的流畅度，而在移动端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
▲CSS3中的三种动画:
1.tranform形变动画：2d转换。
2.transition缓动动画：property duration timing-function delay（css过渡，使变化以渐变形式呈现）。
3.animation逐帧动画：KeyframesName duration timing-function delay iteration-count direction play-state fill-mode（引用关键帧，并设计动画时间，@keyframes：css动画关键帧为动画设计过渡画面）。
要对一个dom进行2d转换，比如放大缩小、平移、旋转，就可以使用transform属性，transform可以设置的变形有：scale（放大缩小）,translate（平移）,rotate（旋转）,skew（斜切，即扭转）,matrix（以像素精度控制变形效果）。
>>例如
div { transform:scale(2,4) translate(20px,20px) rotate(30deg); }
要对一个变形进行过度渐变处理，就可以使用transition属性。transition属性声称任何css属性都可以过度处理（过度对象设置为all），但实际引用中需要测试。例如对上例的变形进行过度处理：div{ transition:transform 2s; }
▲transition的优点在于简单易用，但是它有几个很大的局限:
1.transition需要事件触发，所以没法在网页加载时自动发生。
2.transition是一次性的，不能重复发生，除非一再触发。
3.transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4.一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
所以，CSS Animation就是为了解决这些问题而提出的，结合关键帧@keyframes和animation属性，
>>例如
div{ animation:myfirst 2s;}
@keyframes myfirst{
0%{background:red;}
50%{background:blue;}
100%{background:yellow;}
}
在此推荐一款强大的预设css3动画库：Animate.css。内置预设了丰富的css3动画效果，使用引入也非常方便，可以基本满足日常需求并且快速制作出理想的动效。
完成以上3个阶段的工作，整个切图的骨架基本思路就已经完成啦，剩下的就是在实践过程中不断的添砖加瓦，结合项目的具体需求，搭建起前端开发的坚实地基吧！
交易额: 1166.99万元
无 |山东省 |青岛市 |城阳区
交易额: 1067.69万元
个人 |山东省 |青岛市 |城阳区
交易额: 379.28万元
工作室 |广东省 |惠州市 |惠城区
交易额: 249.47万元
公司 |上海市 |上海市 |黄浦区
成为一品威客服务商，百万订单等您来有奖注册中
价格是多少？怎样找到合适的人才？
￥100 已有0人投标
￥300 已有1人投标
￥3000 已有2人投标
￥3000 已有7人投标
￥2800 已有1人投标
￥1300 已有5人投标
￥1800 已有1人投标
￥1000 已有1人投标
企业QQ
智能客服
