HTML5在线教程和技术博客

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

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

    阅读全文 收藏 评论 (0) 阅读 (3983) 2016-05-06 13:49:09  
  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop>{>> >>width:>8px;>> >>height:>7px;>> >>border-radius:>100%;>>>> }其次雨滴是一个个凸透镜,能...

    阅读全文 收藏 评论 (1) 阅读 (2172) 2016-05-06 13:13:45  
  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式, 在CentOS服务器上安装了sass-lang和compass框架(前提是安装了ruby开发环境)。 然后在php中通过系统命令执行接口(exec/system)把编译工作转交给sass/com...

    阅读全文 收藏 评论 (0) 阅读 (2066) 2016-04-19 14:19:21  
  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosynth软件来制作。1.环境纹理首先什么是环境纹理?在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景(虚拟的或现...

    阅读全文 收藏 评论 (0) 阅读 (8137) 2016-04-16 00:30:11  
  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在canvas标签上花了很多时间,我想如果把这段时间学到的关于WebGL和JavaScript的小技巧都写下来,一定很有意思。有一些很具体,有一些却很笼统,希望你们喜欢!>

    阅读全文 收藏 评论 (0) 阅读 (8121) 2016-03-16 00:16:49  
  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。>[TD_Editor] data-height=380 data-theme=embed data-slug-id=26706 d...

    阅读全文 收藏 评论 (0) 阅读 (8678) 2016-03-16 00:07:15  
  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。>
    上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体。现在我要开始创建一些更加有意思的东西了。
    在这一篇教程中,我们会先花点时间来加入一个动画循环,然后是顶点attributes变量和一个...

    阅读全文 收藏 评论 (0) 阅读 (6243) 2016-03-15 23:43:02  
  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上发表了六篇入门教程文章,经网友omni翻译为中文文档。虽然是几篇老文章,仍然值得参考阅读。我们汇总在一起便于读者查阅。]

    阅读全文 收藏 评论 (0) 阅读 (7569) 2016-03-15 23:18:25  
  • HTTP/2背景和新特性简介

    在前面的一篇文章中已经介绍了HTTP1.1的现状和问题。为了从协议本身上解决这些问题,业界推进...

    阅读全文 收藏 评论 (0) 阅读 (1112) 2016-01-30 22:45:38