-
CSS3弹性布局内容对齐（justify-content）属性使用详解
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是...
-
CSS3弹性布局弹性流（flex-flow）属性详解和实例
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: &flex-direction< || &flex-wrap{>> >>>>display:>flex;>> }>> .flex-container.first>{>> >>>>flex-flow...
-
如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜（filter，也可称之为过滤器）的工作方式，本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们首先实现一个勾勒轮廓的效果，这可以通过两张相同背景图细微错位然后求差值来获得：.colored-pencil-effect:before>{ >>>>>>>>background-image:>url(/uploads/1... -
深入理解CSS3滤镜（filter）功能和实例详解
CSS3滤镜功能源自SVG滤镜规范，SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果（模糊、变形、色度等），这赋予开发者更多创意表达的空间。为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范： -
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能，并深入剖析了其内在原因。技术结论大致如下：1. jQuery出于设计原因，在动画性能上表现最差2. CSS3由于把动画逻辑推给了浏览器，优化了内存消耗、DOM操作和默认利用了RAF，所以要比jQuery动画性能更好3. CSS3可能会引起浏览器主线程和复合器线程之间过度数据交互，从而导致性能下降4...
-
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页技术。...
-
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上，这对服务器带宽产生较大压力。因此在某些应用下（对图片要求不那么高）我们可以在客户端来压缩图片，然后再提交给服务器。总体思路是：1. 使用HTML5的FileReader接口来读取用户上...
-
使用HTML5 Canvas实现的界面元素截屏功能
如果网站出现问题，常常需要截图来提交反馈，这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入html2canvas.js，建立一个简单的页面：然后调用如下的代码，上述DIV中包含的内容将被截屏并添加到页面下面：在线...
-
HTML5动画背后的数学2 - 仿生智能算法综述
本文是前文粒子群仿生算法的续，转发一篇对主流仿生智能算法的一个综述。相关实例...
-
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画，如模拟鸟群运动：http://wow.techbrood.com/fiddle/30529等等。这里面除了HTML5 Canvas绘制技巧外，主要是背后的数学算法。本文转发一篇该动画背景算法的简介。1. 引言粒子群优化算法(PS...
Copyright © 2017 TechBrood Co. All rights reserved. 沪ICP备14011478号
