自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

陈小峰(iefreer)的专栏

踏得网: 发现和展示WEB魔法

原创 Three.js 中文文档和在线演示实例

Three.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。 踏得网专注于HTML5技术生态链的资源开发,鉴于网络上Three.js方面的资料比较散乱,且良莠不齐, 因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来,提供在线中文文档...

2016-06-16 19:40:24 85883 4

原创 基于HTML5实现的在线3D虚拟试衣系统(试衣间)解决方案

3D虚拟试衣系统的使用场景主要是在线电商或数字营销,为品牌服装、服饰、饰品添加高端3D虚拟购物动效,提升用户感官体验和交互体验。 踏得网基于网页/HTML5独家研发了一套在线3D虚拟试衣间系统。纯网页版,跨平台支持,无需用户安装插件。

2020-05-15 16:00:30 38275 10

原创 A-Frame WebVR开发入门教程

WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的 A-Frame 框架就是这样一个工具,提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型,而不需要编写过多...

2017-04-07 00:05:51 21969 1

原创 如何在浏览器中使用WebAssembly特性

WebAssembly是一个新的重大网页技术,顾名思义“网页的汇编语言”。[参考阅读:什么是WebAssembly,为什么需要WebAssembly]该技术得到Mozilla、Google和Microsoft的支持,但目前如果要体验该特性,需要修改浏览器的一些标记(配置):对于Chrome,打开c...

2017-03-02 22:12:26 12447 1

原创 CSS3特性查询(Feature Query: @supports)功能简介

这是2017年不能不了解和学习的一个CSS新特性,很简单实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Query)来检测屏幕尺寸,从而实现响应式界面设计。而特性查询则用来查询用户代理(如桌面浏览器)是否支持某个CSS3的特性,这个功能除了...

2017-02-07 13:24:39 7795 0

原创 2016年度10大HTML5动画

踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。技术全面覆盖HTML5/CSS3/SVG/WebGL/ES6。

2016-12-27 17:55:24 33461 1

原创 php tesseract 不能执行成功

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

2016-12-21 15:20:57 8440 2

原创 使用Babel独立版编译ES6代码时报错误:Unexpected token <

使用babel-standalone来在线编译ES6代码,但是遇到如下错误: “Unexpected token <” 原因是ES6中使用了ReactJS,需要在编译预设置选项(presets)中添加react

2016-11-08 17:58:25 12655 0

原创 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了速查手册似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准,为什么HTML5代表了下一代网页乃至移动应用技术。

2016-11-06 00:56:26 9790 0

原创 使用JS压缩用户上传的图片

使用HTML5的FileReader接口和Canvas的toDataURL接口来实现客户端图片压缩以减轻系统负荷。

2016-11-04 22:39:04 19457 3

原创 HTML5 vs Hybrid APP vs Native APP和技术选型

HTML5(纯移动Web应用)和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap)、微软的Xamarin、Facebook的React Native、Google的Na...

2016-10-17 23:02:36 9593 0

原创 Sphinx2.1.9使用HTML文件作为索引源技术要点备忘

踏得网(http://techbrood.com)站内教程和手册的查找功能,建立在Sphinx上,其最新发布版本为2.2.11。 Sphinx既能支持数据库索引,也支持对文本文件(xml、html、txt等)和json结构文件进行直接索引。本文说明如何建立HTML文件的索引。

2016-10-13 15:25:43 7662 0

原创 Babylon.js入门简介和开发实例

Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。 Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon.js是微软推动的,和微软的相关技术结合更好。 本文对Babylon.js的使用做个...

2016-10-10 23:22:06 21718 1

原创 如何使用Canvas绘制闪电动画

在天气预报类移动网页应用中,我们常常需要使用到雷雨天气时的闪电动画。 本文介绍如何使用Canvas来很简单的实现这个效果。对于Canvas不熟悉的,可阅读踏得网免费HTML5在线教程Canvas基础知识部分。

2016-10-08 13:35:13 10112 0

原创 学习使用CSS做进度条

进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。

2016-10-07 11:15:51 10873 0

原创 Blender 2.7.7 引用OSL文件的路径问题

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

2016-07-07 23:42:09 8280 0

原创 WebVR简介和常用资源链接

这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。 现在体验VR,一般你需要在VR设备的前方加上一个手机,这额外添加了重量和总体成本。 理想的体验是能投影到空间上,然后使用内置浏览器打开url,而无须下载APP,这将打破视觉空间和输入空间的限制。

2016-06-19 11:42:45 12691 0

原创 WebGL中纹理贴图过滤器(filter)参数设置详解

创建好纹理后,我们需要设置纹理的一些常用参数,其中最主要的是过滤器(或滤镜)参数设置。 这个参数将影响纹理在发生缩放(比如一个交互式3D对象或一个远景运动中的对象)时,如何生成纹理贴图。 在踏得网的WebGL纹理滤镜详解一文中,我们做了详尽的解释,并内嵌了在线演示用例。

2016-06-10 11:52:48 10202 0

原创 Three.js 3D打印数据模型文件(.STL)加载

WebGL(基于HTML5 Canvas的3D绘图上下文)可以用来构建3D视图、立体动画、人机交互。 Three.js是一个主流的JS框架用来支持和简化WebGL编程。 本例是一个简单的Three.js应用,即把一个外部可用于打印的3D标准建模文件(STL文件)载入到浏览器中绘制出来。 [i...

2016-06-04 12:52:37 799 0

原创 Yii1中Model中Relation定义和with、together方法使用注意点

在Yii中如果使用Model(ActiveRecord)来完成联合查询,我们首先需要在Model中定义关联关系。Yii并不会默认进行关联查询,我们需要使用类似如下的代码:Article::model()->with('Category')->together()-&...

2016-05-29 09:18:50 10052 0

原创 使用Canvas绘制不完美/不规则的圆形

真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。首先我们要了解,在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。那么所谓不完美圆形,实际可以通过一个不等边...

2016-05-23 20:16:26 17118 1

原创 如何使用CSS3实现一个3D商品标签

使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上, 来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背景图片,一种是使用三角形的CSS3伪元素。 本文介绍第2种方法,使用一个最简化的实例来讲解如何实现这个效果

2016-05-15 13:02:26 4406 0

原创 如何使用CSS3实现一个3D泡沫图形

要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识,我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。 我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。

2016-05-06 19:51:54 6470 0

原创 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素,其次雨滴是一个个凸透镜,能折射出远处的景色。

2016-05-03 17:27:32 7356 4

原创 如何使用CSS3实现一个平滑的3D文本标题

要实现3D文本,基本上有3种方法: 1. 使用CSS3的投影滤镜(filter: drop-shadow) 2. 使用3d建模和CSS3 3d变换来实现(最真实) 3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持) 本例简单说明使用text-shadow属性来...

2016-04-27 13:58:45 3695 0

原创 响应式设计媒体查询尺寸分界点一览表

CSS3中的媒体查询(media query)是响应式设计的关键技术。媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式,所以我们需要对尺寸检测有一个统一的参考标准。从最佳用户体验来看,材料化设计用户界面应该适应如下布局尺寸:480、600、840、960、1280、1440和1600dp(设...

2016-04-23 20:24:25 12193 0

原创 SVG过滤器feColorMatrix矩阵变换效果用法详解

在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a); 那么就可以应用矩阵相乘的方法来对其进行变换操作。SVG标准中的feColorMatrix,当类型取值为matrix时,就是利用这个方法来...

2016-04-22 10:55:17 5569 1

原创 使用CSS3实现流星雨动画教程

很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方法,在粒子数量少的时候,实现起来要更为简单,且便于调试。流星雨的构成流星雨=流星+雨。流星本身包含2个部分,一个是带光晕的星星,一个是尾部...

2016-04-19 20:16:07 24406 0

原创 CentOS安装sass-lang报错Temporary failure in name resolution

在给我们的开发平台添加sass/scss语言支持时,需要安装sass-lang(已安装ruby环境)。但遇到如上的错误,经排查和DNS配置(vi /etc/resolv.conf)无关,而是因为gem的source不可用。

2016-04-18 15:22:18 1960 0

原创 如何实现一个原质化菜单项或按钮HTML5动画效果

原质化设计(Material Design),也叫材料化设计,是Google提出并应用于触摸屏(移动应用)上的一种交互设计风格。强调一种能给用户自然反应的高级纸质触感。其中一个实例就是在触摸按钮或菜单时,呈现一个以触摸点为中心位置的涟漪(水波)动画。要实现这样的动画,主要需要处理2个任务,一个是实...

2016-04-15 16:36:49 3332 1

原创 使用requestAnimationFrame和Canvas给按钮添加绕边动画

要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimationFrame接口我们使用requestAnimationFrame接口来实现动画帧的绘制,该接口告诉...

2016-03-30 23:42:39 3576 0

原创 如何使用纯CSS3实现一个沙漏动画

要实现一个沙漏动画,我们首先需要实现一个漏斗的几何形状。漏斗图形我们接着把漏斗拆分成3个简单图形:一个三角形,一个倒置三角形和中间的管道(垂直线)。那么问题就简化为实现三角形和直线。要实现三角形很简单,有模式可套用。即使用零宽高的元素,设置1条边带颜色,相交的2条边为透明。这主要利用了颜色渲染区域...

2016-03-30 16:02:54 5525 2

原创 使用CSS3实现响应式标题全屏居中和网站前端性能

要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位和自动外边距等。全屏居中其中目前比较流行也比较容易理解的方法是使用绝对定位+偏移实现。也就是分两步来把元素居中:1. 第一步先把元素放在离视口左上角(坐标原点)50%视口宽和50%视口高的地方;2. ...

2016-03-26 22:17:23 3654 1

原创 使用纯CSS3创建一个纺锤形分隔线

纺锤形分割线用于仿真纸中间被剪开时的阴影效果,也就是中间咧开而两边收拢的情况。 简单讲就是两头小,中间大。使用CSS3来实现这种效果,可以使用border-radius和box-shadow两个属性。

2016-03-24 19:10:13 5047 2

原创 使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条。所以要...

2016-03-19 18:03:40 6123 1

原创 使用纯CSS3实现一个日食动画

日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳。所以要构造日食,我们需要2个对象:一个代表月亮,一个代表太阳。 我们把整个日食过程分解为3个阶段:1. 缓慢移入 2. 短暂停留 3. 缓慢移出。在此期间,会产生3个彼此关联的动画。首先是月亮的位置移动,我们通过改变月亮的X坐标(left...

2016-03-19 15:52:34 2089 2

原创 使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。 比如你只是想调整下颜色、线条大小和倾斜的角度,你都得打开作图软件来折腾一下。 现在我们可以使用CSS3伪元素及其...

2016-03-13 18:48:59 18795 3

原创 如何使用CSS3实现书页(书本)卷角效果

我们有时候想在踏得网页面上显示一个公告或用户提示信息。一个常用设计是使用书签形状。 我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。 用CSS3的伪元素实现这个效果很容易。

2016-03-10 16:46:10 11036 5

原创 CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例

弹性项目可以按弹性容器当前行的cross axis来对齐,和justify-content类似,但在垂直方向上。其中align-items属性用于弹性容器,而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性,包括匿名弹性项目。align-self 可...

2016-03-01 22:26:16 22611 0

原创 CSS3弹性布局内容对齐(justify-content)属性使用详解

内容调整(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。

2016-03-01 22:02:33 96281 4

提示
确定要删除当前文章?
取消 删除