这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。语法格式@supports <supports-condition> {   <group-rule-body> }特性查询使用@supports规则（和媒体查询@media类似，都是使用一个@符号前缀：at-rule），该CSS规则允许我们把CSS样式写在条件块中，这样只有在当前用户代理支持一个特定的CSS属性值对（property-value pair）的时候才被应用。举个简单的例子，如果我们要为支持弹性框（flexbox）特性的浏览器定义样式，可以像下面这样写：123@supports ( display: flex ) {    .foo { display: flex; }}同样的，和媒体查询规则类似，可以使用一些逻辑操作符（如and、or和not），并支持串 ...继续阅读 (91)

踏得网精选2016年度最酷最新的HTML5动画集，评选标准为：创意新颖度+实现技术难度+趣味程度。所涉及技术覆盖：HTML5/CSS3/SVG/WebGL（Three.js）/ES6（BabelJS）。TOP10: 镜花水月使用SVG turbulence 滤镜实现的动画特效TOP9: 海上生明月，天涯共此时3D版本的水中月，使用Three.js 3D渲染引擎实现，光影效果很不错TOP8: 机甲战士使用WebGL实现的一个3D版本的射击小游戏（无情节），包含3D游戏的基本交互操作TOP7: 魔镜魔镜使用GIF图作为整体的场景动画，使用WebGL实现内嵌的魔镜特效，很有创意TOP6: 亡命小兔来一个相对完整的年度小游戏作品，使用Three.js和GSAP所实现。TOP5: 时空隧道超炫的HTML5/WebGL虫洞特效，体验玄幻穿越。TOP4: 在线电子琴使用柏林噪音算法实现的音乐自动演奏，使用Tone音效库实现的声音效果TOP3: 雨中飞鸟一个HTML5微动漫作品制作。淅沥沥雨中栖息在电线杆上的鸟儿，忽然传来一声犬吠，惊起一线飞鸿。使用HTML5/SVG/CSS3制作动画，使用buzz.js实现音效。TOP2: 花样年华使用WebGL模拟时光流淌的动画，可用于电影特效TOP1: 自由之枝在HTML5/Canvas上绘制分形树生长动画。使用鼠标划线，帮助树枝摆脱束缚，变身自由 ...继续阅读 (91)

centos6的环境，php版本为5.5，tesseeract为2.0.2版本，执行其他命令如ls可以，执行tesseract不工作。在命令中加入 2>&1，返回错误信息“不能加载eng.unicharset"，语言包访问权限问题，修改权限解决问题，记录下。 ...继续阅读 (66)

使用babel-standalone来在线编译ES6代码，但是遇到如下错误：Unexpected token <原因是ES6中使用了ReactJS，需要在编译预设置选项（presets）中添加react，记录下。 ...继续阅读 (69)

常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了W3School似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页乃至移动应用技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄（尽管还不那么成熟，还依赖于标准和浏览器的进一步发展），而是一本厚厚的需要长期学习的长篇巨著，HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜，对于整个互联网行业的结构性影响都是非常深远的。HTML5HTML5不只是简化了协议声明，添加了若干标签和API，其核心目标是把网页变成富媒体，最重要的就是给了你随心所欲的画布（canvas），Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果，前端工程师利用数学知识可以成为网页魔法师（艺术家）。http://wow.techbrood.com/fiddle/26587http://wow.techbrood.com/fiddle/12892CSS3CSS3的核心改变在于引入了动画和特效，再也不是静态的样式，你可以利用filter、animation、gradient制作出PS都做不出来的艺术动画！还有一个重要特性是媒体查询，用来支持响应式设计。http://wow.techbrood.com/fidd ...继续阅读 (136)

手机用户拍的照片通常会有2M以上，这对服务器带宽产生较大压力。因此在某些应用下（对图片要求不那么高）我们可以在客户端来压缩图片，然后再提交给服务器。总体思路是：1. 使用HTML5的FileReader接口来读取用户上传的图片2. 使用canvas drawImage接口绘制到Canvas 2d中3. 使用canvas toDataUrl接口把图片转成base64编码字符串（这里可以降低图片质量）4. 完成image src的替换后，表单提交时，就提交新的被压缩过的图像这里不重复贴代码，直接看在线演示：http://wow.techbrood.com/fiddle/30625该方案支持IE10+, FF, Chrome, Safari等现代浏览器。有两点需要注意：1. 注意在FF下，类似这样的处理方案必须确保canvas绘制和toDataUrl的处理是同步进行的，也就是不能是异步处理的，否则可能会出现其他事件触发页面组合（Composite）而导致canvas缓存被清空的情况，那样toDataUrl出来的会是空白字符串。2. 需要等image加载完成再做draw和转换的动作，否则一些浏览器会有问题。by iefreer ...继续阅读 (69)

HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能，搞出来一些混合APP的解决方案。比如Apache的Cordova（也就是以前的PhoneGap），其软件架构如下：Cordova的工作原理是生成一个内置webview控件的容器app（这是个本地app），然后在webview中运行html/css/js的代码，如需调用本地服务如相机/传感器，则通过JS本地桥接器来执行。这种方式的混合APP本地化的比例很小，本质上和Web程序更为接近，因此性能不佳。为了追求更好的性能和本地化体验，有些框架扔掉了WebView，而直接提供了UI组件的JS接口，架构如下：这种混合APP本质上更接近移动本地应用，也因此需要针对不同的平台做定制开发。后面这种解决方案主流的有微软的Xamarin、Facebook的React Native、Google的NativeScript。那么在客户想要移动应用的时候，究竟该怎么选择呢？基本上我们要准备一些问题，来帮助客户搞清楚实际想要的是什么，然后提出自己的建议。1. 是否需要发布到应用商店如果是，那么应该选择移动本地应用或Hybrid APP。2. 是否要给APP定价如果是，同上，只有应用商店才支持下载付费。3. 是否需要调用传感器、相机等底层本地接口如果是，同上，因为纯HTML5无法访问这些接口。4. 性能是否是第一考虑 ...继续阅读 (69)

踏得网站内教程和手册的查找功能，建立在Sphinx上，其最新发布版本为2.2.11。Sphinx既能支持数据库索引，也支持对文本文件（xml、html、txt等）和json结构文件进行直接索引。对文本文件建立索引的主要步骤如下：1. 使用脚本程序把所有文件的路径录入到数据库中的一张表中（至少包含2个字段，id和全路径文件名）2. 在sphinx.conf中添加相应的索引源（source）和索引定义（index）    sql_query       = SELECT id,title,file_name,url,type from your_table_name    sql_file_field        = file_name3. 用sphinx api查询设置title有较高的权重4. 分页处理时，按sphinx api返回的id排序，参见：http://dev.mysql.com/doc/refman/5.5/en/string-functions.html#function_field语法示例：ORDER BY field(id, 2, 1, 4);5. 构建文件内容摘要列表，其中$docs为所有匹配文件的内容列表，$index为索引名，$opts里面可以定义 ...继续阅读 (86)

Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的，比Babylon.js要成熟些，而Babylon.js是微软推动的，和微软的相关技术结合更好。本文对Babylon.js的使用做个简单的介绍。首先的首先，请确保你的浏览器支持WebGL(IE11+/Edge/Firefox 4+/Google Chrome 9+/ Opera 15+/Safari...)。如何你使用sublime等桌面工具开发，那么首先你得下载最新版本的BabylonJS，创建一个项目，文件如下:yourProject |- index.html |- babylon.2.3.js在本文中，我们简化下，直接使用在线开发工具：http://wow.techbrood.com/fiddle/new只要有浏览器即可，无需下载或安装任何软件。在其中的HTML面板()中编写如下代码：<script src="http://cdn.babylonjs.com/2-3/babylon.js"></script> <canvas id="renderCanvas"></canvas>WebGL需要借助HTML5的ca ...继续阅读 (65)

在天气预报类移动网页应用中，我们常常需要使用到雷雨天气时的闪电动画。本文介绍如何使用Canvas来很简单的实现这个效果。对于Canvas不熟悉的，可阅读踏得网Canvas基础知识。本例预期结果如下：本质上我们只是要在画布上绘制一条曲线而已，只不过这条曲线有固定的起点，相对随机的走向。注意：这里是相对随机，也就是线条的走向不能毫无规律，一般不可能从左到右大幅度游走，而是有限区间内的游走。具体代码实现如下：var x = canvWidth / 2; var y = 0; var light = function() {     var r = 0;     ctx.beginPath();     ctx.moveTo(x, y);     r = Math.floor(Math.random() * 5) * canvWidth / 50;     if (r <= 30) {         x += r;     } else {         x -= r;     }     y += Math.floor(Math.random ...继续阅读 (91)

进度条是基础的界面控件，可用于多种场合，比如任务完成进度，手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示：直观上，我们可以把该进度条控件分为2个部分，外部的边界用来表示固定的目标范围，里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下：.pb-scope { display: inline-block; width: 100px; height: 20px; padding: 2px; border: 4px solid #A157FC; border-top-left-radius: 10% 50%; border-top-right-radius: 10% 50%; border-bottom-left-radius: 10% 50%; border-bottom-right-radius: 10% 50%; }内部条形元素边界的弧度需要和外部范围元素的保持一致，可以使用继承的方式：.pb-scope .pb-bar { display: block; width: 70%; height: 100%; border-radius: inherit; background: #A157FC; }具体使用时的HTML代码示例如 ...继续阅读 (85)

3D虚拟试衣系统的使用场景主要是在线电商或数字营销，为品牌服装、服饰、饰品添加高端3D虚拟购物动效，提升用户感官体验和交互体验。要研发这样的在线系统，有2个方向，一个是使用Flash或Unity3D这些第三方网页插件，第二个就是纯Web方案（也就是HTML5/WebGL）。Flash在移动端有死穴，Unity3D所依赖的API在新版本Chrome中得不到支持（V42以后），而H5是行业开放标准是现在也是未来。因此我们选择基于H5来实现这个目标。踏得网基于网页/HTML5在行业内独家研发了一套在线3D虚拟试衣系统，目前是功能演示/测试版本，包含如下基本功能：1. 纯Web/HTML5版本，无需用户安装任何插件，跨平台跨设备终端，只要是支持WebGL规范的现代浏览器就可以运行；2. 360°浏览模特和衣服，支持交互式缩放、旋转、平移；3. 可修改模特参数，以匹配自己的身材体型；4. 可选择不同的衣服进行试穿；5. 可选择模特的肤色；6. 可选择环境参数，如光照颜色、是否有风、是否需要聚光效果、舞台是否需要自动旋转等；如果选择有风的环境，则呈现自然风吹拂摆动/波动特效。产品演示截图如下：一大波更为有趣的功能即将来袭：添加3D场景（室内外）构建、虚拟T台秀（虚拟走秀）和更多模特、衣服模型和动作的制作，以及和VR/AR技术的结合。感兴趣的同学或服务商，可在踏得网留言，或发邮件到 chenxi ...继续阅读 (56)

在使用Blender2.7.7给模型添加纹理时，启用了Render的OSL（开放式着色语言）支持。但是在引入外部.osl文件时，控制台报存储临时文件失败错误。原因是用户名为中文，程序不能正确处理，所以需要修改系统临时文件夹。对于Win10来说做如下修改：1. 进入WIN键》控制面板》系统》高级配置》环境变量2. 修改当前用户的TEMP和TMP变量为c:/tmp ...继续阅读 (78)

什么是WebVR这是一个实验性的JavaScript API，提供了在用户网页浏览器中访问虚拟现实设备的统一接口。现在体验VR，一般你需要在VR设备的前方加上一个手机，这额外添加了重量和总体成本。较好的体验是能投影到内置的屏幕上（甚至空间上），然后使用内置浏览器打开url，而无须下载APP。在这样的场合下WebVR能更好的发挥作用。WebVR的发展依赖于VR输入方式的变革，如果能在空间投影出虚拟键盘，那将是革命性的。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星的Gear VR以及HTC Vive。其中Vive和DK2都是高端专业VR设备，Gear VR属于中端设备，CardBoard是入门级的VR设备。规范规范尚处于开发状态，位于：https://w3c.github.io/webvr/如何试用目前Firefox的nightly builds版本、Chrome的试验版本以及三星公司Gear VR的内置浏览器都支持该API。你可以通过如下的链接获取启用了WebVR功能的编译版本：ChromeFirefoxSamsung Internet for Gear VR或者，如果你想在移动网站上添加WebVR支持，你可以使用WebVR Polyfill来支持Cardboard设备：WebVR PolyfillChrome计划在版本54中内置支持WebVR接口 ...继续阅读 (193)

Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来，提供在线中文文档以及方便的调试学习环境。下图是1个使用Three.js开发的一个HTML5/WebGL赛车操控动画，我们从中可以体会到Three.js的强大。中文文档访问链接：http://techbrood.com/threejs/docs和我们的其他教程一样，我们采用迭代的方式进行在线文档的开发，已完成部分的标题前会打上勾号。 ...继续阅读 (168)

WebGL中的纹理贴图（Texture Map）用来给3D对象添加真实表面观感。我们这里混用纹理、贴图、纹理贴图、Texture和Texture Map这些词汇，不做区分。纹理并没有什么特别神奇之处，我们可以把它看成是顶点的一个属性，是一种特殊的顶点颜色属性，只是多了外部图像加载，2D屏幕坐标到3D对象坐标映射逻辑的处理。创建好纹理后，我们需要设置纹理的一些常用参数，其中最主要的是过滤器（或滤镜）参数设置。这个参数将影响纹理在发生缩放（比如一个交互式3D对象或一个远景运动中的对象）时，如何生成纹理贴图。在踏得网的WebGL纹理滤镜详解一文中，我们做了详尽的解释，并内嵌了在线演示用例。 ...继续阅读 (113)

在Yii中如果使用Model（ActiveRecord）来完成联合查询，我们首先需要在Model中定义关联关系。Yii并不会默认进行关联查询，我们需要使用类似如下的代码：Article::model()->with('Category')->together()->find...这个语句将按照在Model中定义过的Relations来建立关联查询语句，默认LEFT JOIN。如果不使用together，只使用with方法，那么生成的是子查询：select ... from articles where id in (select id from article_categories)如果不使用with，那么等同于未定义关联关系的单表查询。 ...继续阅读 (127)

真实世界是不完美的，当我们需要模拟真实世界时，经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形，所用方法适用于很多场合，一个典型的用例如逼真的下雨场景。首先我们要了解，在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。那么所谓不完美圆形，实际可以通过一个不等边不对称的多边形来实现。要实现不等边不对称，一个简单的方法是使多边形各个顶点距离中心点的距离（即半径）为一个随机值就好。为避免半径落差过大，我们可以给其设定一个最大和最小值，然后在这个区间进行随机，代码如下：function drawCircle(centerX, centerY, minRad, maxRad) { var points = 512; //多边形边的总数目 var rad, theta; var twoPi = 2 * Math.PI; var x0, y0; context.strokeStyle = "#aa6699"; context.lineWidth = 1.01; context.fillStyle = "#6633aa"; context.beginPath(); theta = 0; x0 = centerX + rad ...继续阅读 (87)

使用3D缎带形状的标签是常见的一个设计模式，用在商品折扣、文章标题或网站推荐信息上，来突出显示重点内容，吸引用户视觉焦点。实现的方法有2种，一种是使用背景图片，一种是使用三角形的CSS3伪元素。本文介绍第2种方法，使用一个最简化的实例来讲解如何实现这个效果：上面的界面是一张简化的商品卡片，包含标签和商品描述，我们使用h2元素来容纳标签，HTML代码如下：<div class="fancy">   <h2>     <span class="ribbon-center">50% OFF!</span>   </h2>   <p>     <img src="/uploads/160501/glass.jpg">     Check out these killer deals from Oakley!      Get ...继续阅读 (83)

要实现一个逼真的泡沫，涉及到比较复杂的光学/物理学知识。我们这里先简化下问题，实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中，比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素12345.bubble {    width: 200px;    height: 200px;    border-radius: 50%;}上面圆角边框半径等于50%，定义了一个圆形元素的样式。添加3D阴影泡沫应该是有色彩梯度的，这可以通过线性渐变（linear-gradient）和径向渐变（radial-gradient）属性来实现。也可以通过框阴影（box-shadow）来实现，本例使用内外box-shadow来实现：1234567891011121314box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),    /* 淡灰色渐变背景，光源位于左上方 */    &nbs ...继续阅读 (136)

在天气预报类的Web移动应用中，常常需要实现屏幕的雨滴效果，表示阴雨天气。感觉上比较神奇，其实想通了，这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素：.raindrop {   width: 8px;   height: 7px;   border-radius: 100%;   }其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大于2倍焦距，成倒立、缩小的实像。“倒立”的效果可以通过旋转180°来实现，“缩小”的效果我们这里通过设置背景图片的尺寸来达到（下面把背景图缩小到全屏的5%并居中）。.raindrop { position: absolute; background-image: url("http://i.imgur.com/xQdYC7x.jpg"); background-size: 5vw 5vh; background-position: 50%; transform: rotate(180deg) rotateY(0); }这样我们就得到了一个小雨点。随机雨滴接着我们要创建一些随机分布的雨点对象，假如只有几个，我们可以手动编写CSS代码，但如果有几十个，直接写CSS代码的效率和可维护性就很差了。我们使用SCSS的rand ...继续阅读 (107)

要实现3D文本，基本上有3种方法：1. 使用CSS3的投影滤镜（filter: drop-shadow）2. 使用3d建模和CSS3 3d变换来实现（最真实）3. 使用CSS3 text-shadow属性来实现（最简单，可复制，现代浏览器都支持）本例简单说明使用text-shadow属性来实现3D文本的原理和方法。这依赖于text-shadow属性的两个特性：其1是该属性可以给文本添加投影效果，其2是可以在单个元素上应用多个投影效果。先贴一张效果图预览下：text-shadow的工作原理我们看下下面这张图就明白了：text-shadow的语法text-shadow: h-shadow v-shadow blur color;h-shadow是水平方向阴影位置，v-shadow是垂直阴影位置，blur是模糊度，color是阴影颜色具体可参考W3School CSS3 参考手册：http://techbrood.com/cssref?p=css3-pr-text-shadow具体实现代码现在我们来构造叠加的阴影效果代码：.text-3d { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b ...继续阅读 (101)

CSS3中的媒体查询（media query）是响应式设计的关键技术。媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式，所以我们需要对尺寸检测有一个统一的参考标准。从最佳用户体验来看，材料化设计用户界面应该适应如下布局尺寸：480、600、840、960、1280、1440和1600dp（设备独立像素）：分界点(dp)手机/平板电脑竖屏手机/平板电脑横屏屏幕列数间隔宽度(dp)0small handset 超小416360medium handset 超小416400large handset 超小416480large handsetsmall handset超小416600small tabletmedium handset小816/24*720large tabletlarge handset小816/24*840large tabletlarge handset小1216/24*960 small tablet小12241024** large tablet中等12241280** large tablet中等12241440**  大12241600**  大12241920**  超大1224注：上述表格中，*号表示当设备最小宽度小于600时取值 ...继续阅读 (86)

 在计算机图形学（数学）中，矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值（RGBA）表示成一个四维空间向量：color = (r, g, b, a);那么就可以应用矩阵相乘的方法来对其进行变换操作。SVG标准中的feColorMatrix，当类型取值为matrix时，就是利用这个方法来实现的图像过滤效果。变换矩阵的定义和说明feColorMatrix的matrix是一个4*5的矩阵。前面4列是颜色通道的比例系数，最后一列是常量偏移。上面公式中的rr表示red to red系数，以此类推。c1~c4表示常量偏移。第一个4*5矩阵为变换矩阵，第二个单列矩阵为待变换对象的像素值。矩阵1和2的点积这个变换矩阵看起来比较复杂，在实践上常使用一个简化的对角矩阵，即除了rr/gg/bb/aa取值非零外，其余行列取值为0，这就退化成了简单的各颜色通道的独立调整。feColorMatrix的语法<filter id="f1" x="0%" y="0%" width="100%" height="100%">   <feColorMatrix       result="original" id ...继续阅读 (113)

很多营销页面中需要实现类似流星雨的动画背景，营造节日浪漫的气氛。要实现这样的效果，有两种方法，一个是使用Canvas，一个是使用纯CSS3，我们这里介绍第2种方法，在粒子数量少的时候，实现起来要更为简单，且便于调试。流星雨的构成流星雨=流星+雨。流星本身包含2个部分，一个是带光晕的星星，一个是尾部的运动轨迹。而雨实际上就是一个重力掉落的动画。首先我们实现一个星星的形状：.star { display: block; width: 4px; height: 4px; border-radius: 50%;//小圆点 background: #FFF; top: 100px; left: 400px; position: relative; box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);//光晕部分 }上面的代码实际上是一个带灰白阴影的白色小圆点。通过改变background属性可以得到不同颜色的星星。接着我们来实现一个尾部轨迹，我们可以使用另外的元素，但CSS的伪元素刚好可以用来做这件事情。.star:after { content: ''; display: block; top: 0px; left: 4px; bord ...继续阅读 (99)

在给我们的开发平台添加sass/scss语言支持时，需要安装sass-lang（已安装ruby环境）。但遇到如上的错误，经排查和DNS配置（vi /etc/resolv.conf）无关，而是因为gem的source不可用。添加如下gem源：#gem sources -a https://rubygems.org/#gem sources -a https://ruby.taobao.org/  （rubygem的阿里镜像）执行安装：#sudo gem install sass查看安装版本：#sass -vDEPRECATION WARNING:Sass 3.5 will no longer support Ruby 1.9.3.Please upgrade to Ruby 2.0.0 or greater as soon as possible.Sass 3.4.22 (Selective Steve) ...继续阅读 (216)

原质化设计（Material Design），也叫材料化设计，是Google提出并应用于触摸屏（移动应用）上的一种交互设计风格。强调一种能给用户自然反应的高级纸质触感。其中一个实例就是在触摸按钮或菜单时，呈现一个以触摸点为中心位置的涟漪（水波）动画。要实现这样的动画，主要需要处理2个任务，一个是实现脉冲波效果，还有一个是检测触摸（点击）位置。1.  实现脉冲波效果这个使用CSS3的变换很容易实现，本质上是一个带特定底色的元素渐进放大的动画。在放大的同时，减小透明度，从而制造出放大并淡出的视觉效果。CSS3代码如下：.ripple { width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); position: absolute; opacity: 1; } .rippleEffect { animation: rippleDrop .6s linear; } @keyframes rippleDrop { 100% { transform: scale(2); opacity: 0; } }2. 获取点击位置我们需要的位置 ...继续阅读 (96)

要给按钮添加酷炫的绕边动画，可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素，内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimationFrame接口我们使用requestAnimationFrame接口来实现动画帧的绘制，该接口告诉浏览器在重画（repaint）之前先执行一个动画回调函数。通过这样的回调机制，浏览器可以把多个动画函数执行完成后再统一绘制，提高动画渲染性能。(function() { for (var d = 0, a = ["webkit", "moz"], b = 0; b < a.length && !window.requestAnimationFrame; ++b) window.requestAnimationFrame = window[a[b] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[a[b] + "CancelAnimationFrame"] || window[a[b] + "CancelRequestAnimationFrame"]; window.requ ...继续阅读 (109)

要实现一个沙漏动画，我们首先需要实现一个漏斗的几何形状。漏斗图形我们接着把漏斗拆分成3个简单图形：一个三角形，一个倒置三角形和中间的管道（垂直线）。那么问题就简化为实现三角形和直线。要实现三角形很简单，有模式可套用。即使用零宽高的元素，设置1条边带颜色，相交的2条边为透明。这主要利用了颜色渲染区域在边界交接处按对角线平分的规则。#bottom { border-right: 20px solid transparent; border-bottom: 20px solid #f57323; border-left: 20px solid transparent; height: 0px; width: 1px; }注意上面的width属性不是0而是1px，这是因为我们实际上需要的是带一点点秃顶的三角形（梯形），所以我们把width设置成1px。同样我们可以实现一个倒置的三角形：#top { border-top: 20px solid #f57323; border-right: 20px solid transparent; border-left: 20px solid transparent; height: 0px; width: 1px; }接着我们同样利用带一条边的元素来创建一根垂直线：#l ...继续阅读 (96)

要实现标题全屏居中（同时在垂直和水平方向居中），有若干种方法，包括使用弹性布局、表格单元、绝对定位和自动外边距等。全屏居中其中目前比较流行也比较容易理解的方法是使用绝对定位+偏移实现。也就是分两步来把元素居中：1. 第一步先把元素放在离视口左上角（坐标原点）50%视口宽和50%视口高的地方；2. 第二步把元素反向偏移其自身宽高的50%。html,body{background: #333;height:100%; width:100%;margin:0;padding:0;} h1 { margin-left: -25%; margin-top: -35px;/* h1元素边框的高度一半 */ color: white; width: 50%; height: 30px; text-align: center; position: absolute; left: 50%; top: 50%; padding: 20px 0; border: 1px solid #666; }上述代码使用绝对定位，top: 50%, left: 50%完成第一步，margin-left和margin-top完成第二步。注意标题元素宽度使用百分比，可在水平方向自适应屏幕宽度。最好设置下min-width，以免屏幕过 ...继续阅读 (77)