HTML5在线教程和技术博客

  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色缓存和深度缓存区,颜色缓存用来成像,深度缓存用来剔除不可见对象。相机每一帧渲染时,一般都会清除这两个缓冲区,否则就会出现重影现象。多个相机渲染时,有先...

    阅读全文 收藏 评论 (0) 阅读 (1124) 2018-08-13 13:35:58  
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,千人一面乏善可陈,不入该列。所涉及技术主要是:HTML5/CSS3/SVG/WebGL(Three.js)/ES6(BabelJS)。TOP10: 镜花水月使用SVG>turbulence 滤镜实现的动画特效

    阅读全文 收藏 评论 (1) 阅读 (9870) 2017-07-21 09:54:37  
  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独的属性,比如[type],或者可以是一个属性和取值的组合,比如[type=checkbox] 或 [for="email"]。我们也可以用属性选择器来匹配属性存在与否以及子字符...

    阅读全文 收藏 评论 (0) 阅读 (2085) 2017-02-21 18:15:59  
  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们首先实现一个勾勒轮廓的效果,这可以通过两张相同背景图细微错位然后求差值来获得:.colored-pencil-effect:before>{ >>>>>>>>background-image:>url(/uploads/1...

    阅读全文 收藏 评论 (0) 阅读 (1821) 2016-11-29 00:18:02  
  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、变形、色度等),这赋予开发者更多创意表达的空间。为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范:

    阅读全文 收藏 评论 (0) 阅读 (4778) 2016-11-23 17:22:59  
  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

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

    阅读全文 收藏 评论 (0) 阅读 (3663) 2016-11-06 00:15:47