HTML5在线教程和技术博客

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Processing的代码能在Web上工作,John Resig开发了Processing.js,该JS开发库用来完成两个方面的任务:能把Processing语言动态转换成JS,从而在Web环境中执行;

    阅读全文 收藏 评论 (1) 阅读 (11110) 2016-05-18 13:05:24  
  • 如何使用CSS3实现一个3D商品标签

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

    阅读全文 收藏 评论 (0) 阅读 (7417) 2016-05-15 12:50:47  
  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimationFrame接口我们使用requestAnimationFrame接口来实现动画帧的绘制,该接口告诉浏览器在重画(repaint)之前先执行一个动画回调函数。通过这样的...

    阅读全文 收藏 评论 (0) 阅读 (7790) 2016-05-14 22:51:02  
  • 使用纯CSS3实现一个3D旋转的书本

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

    阅读全文 收藏 评论 (0) 阅读 (2399) 2016-05-14 22:44:28  
  • 如何使用CSS3实现书页(书本)卷角效果

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

    阅读全文 收藏 评论 (0) 阅读 (3305) 2016-05-14 22:37:25  
  • SVG过滤器feColorMatrix矩阵变换效果用法详解

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

    阅读全文 收藏 评论 (0) 阅读 (2208) 2016-05-14 22:30:29  
  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble>{ >>>>width:>200px; >>>>height:>200px; >>>>border-radius:>50%; }上面圆...

    阅读全文 收藏 评论 (0) 阅读 (2799) 2016-05-06 19:28:14  
  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标签。如果只是针对一个块内容做样式化,三者并没有区别。
    2、作为语义化标签,section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的...

    阅读全文 收藏 评论 (0) 阅读 (6316) 2016-05-06 17:50:19  
  • 使用CSS3实现流星雨动画教程

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

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

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

    阅读全文 收藏 评论 (1) 阅读 (2426) 2016-05-06 13:13:45