-
动效
文章
模型
-
-
-
踏得网精选2016年度最酷最新的HTML5动画集，评选标准为：创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品，因其主要使用图片和CSS3套路动画，千人一面乏善可陈，不入该列。所涉及技术主要是：HTML5/CSS3/SVG/WebGL（Three.js）/ES6（BabelJS）。TOP10: 镜花水月使用SVG>turbulence 滤镜实现的动画特效
-
BabylonJS（也就是babylon.js，这是一个和three.js类似的WebGL开发框架），更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文件，如OBJ或STL。1.首先引入babylon主js和loader（主要是文件解析作用）的js脚本如下：&base>href="//wow.techbrood.com">/<
&script>src="/libs...
-
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的>A-Frame>框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构...
-
在blender中给模型添加纹理，需要有2个步骤：首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作，略过步骤。但是仅仅这样操作，你会看到模型视图中只有材质是生效了的，而纹理并不能正常渲染。因为我们还没有建立纹理映射坐标，渲染器并不知道该把图像如何映射到平面模型上去。建立纹理映射打开一个新的UV Editor视图，在该视图中打开一个图像文件。在原模型视图中，按Tab切换到编辑（editor）模式，按U，在UV Mapping右键菜单中选择“Unwrap”即可：
-
本文简单说明WebAssembly（简称wasm）工作原理和高性能的原由（和JavaScript相比）。不过需要提醒的是Wasm并非设计来完全替代JS，而是对JS的一个强大补充，JS中一部分高性能应用可以使用wasm来进行替代，比如React小组就准备用Wasm来重写其Reconciler部分（该部分用来管理组件加载和刷新），这些变动对React的使用者不可见...
-
非矩形设计正在变成一种时尚，比如波浪形、菱形、三角形等：而随着技术发展，这种设计在技术实现上也变得更容易。本文以最简单的三角形为例，演示使用5种方法来达到非矩形设计的界面效果。使用透明图片遮盖[TD_Editor] data-height=450 data-theme=embed data-slug-id=33381 data-default-tab=result class=tdwow[/TD_Edito...
-
随着HTML技术的发展，网页要解决的问题已经远不止是简单的文本信息，而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技术的原因。什么是WebGLWebGL是为了给Web添加类似桌面（或移动）系统上的OpenGL的特性支持，从而实现强大的3D图形渲染效果。什么是Asm.jsAsm.js是一个JavaScript...
-
CSS3除了引入动画、滤镜（用于特效）以及新的布局技术外，在选择器（selector）方面也有增强。属性选择器根据元素的属性（attributes）来匹配。这可以是一个单独的属性，比如[type]，或者可以是一个属性和取值的组合，比如[type=checkbox] 或 [for="email"]。我们也可以用属性选择器来匹配属性存在与否以及子字符...
-
对Web开发者来说，一个盼望已久的特性是CSS终于支持原生变量了！
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念（想想数学方程式中的x）。这样CSS看起来更像一门样式“语言”了。在这之前，我们得使用SASS(SCSS)预编译方式来支持变量，现在你可以直接在CSS代码中使用变量。该特性的规范描述在
-
这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。
而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览...
-
JSX是一种类似XML的标签语法，用来简化代码，我们可以不使用JSX，但了解并使用也没什么坏处：）在React中，JSX是一个使用 React.createElement() API的快捷方式，代码看起来更象一个UI组件。每个标签，比如 &View /foo='hello'，或者使用大括号包含起来的内嵌JS表达式，比如 bar={baz}，baz将引用变量baz。标签可以...
-
在ES5，对象的键（key）总是被解释为字符串。ES6允许我们使用计算的值作为对象的键，使用方括号：[myKey]const>chosenAnimal>=>'cat'
const>animals>=>{
>>[`animal${chosenAnimal}`]:>true,
}
console.log(animals.animalcat)>//>true如上animal${chosenAnimal}被动态解释成animalcat键。
这是一个很强大...
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
-
8年前
