摘要: 之前写过一篇CSS3的饼图全面解析,这次给大家分享一个SVG实现饼图的全面解析。 既然是绘制饼图,那么显然需要绘制圆形。 描边刚好是从半径30的位置开始左右两边平均各分配15px的宽度,这样整个圆形看起来就像是45px的半径宽度。 于是,如果我们将描边的宽度设置为半径的两倍,那么整个圆都会被描边所覆 阅读全文
posted @ 2017-07-30 00:53 小碎石 阅读(3566) 评论(0) 推荐(0) 编辑
摘要: JavaScript是实现ECMAScript标准的语言,目前最新的第六版标准于2015年6月发布,简称ES6。目前大多数浏览器都只是实现了ECMAScript标准的第五版。JavaScript的运行需要一个宿主环境,浏览器是最常见的宿主环境,另外还有服务器端环境Node等等。 类型 任何一门编程语 阅读全文
posted @ 2017-07-13 22:09 小碎石 阅读(225) 评论(0) 推荐(0) 编辑
摘要: 零、前言 为什么要用Node? Node把非阻塞IO作为提高应用性能的方式。而在JS中,天生拥有着异步编程机制: 事件机制。同时JS中不存在多进程。这样当你执行相对较慢需要花费时间长的IO操作时并不会阻塞主进程的任务。 在NodeJS中流行两种响应逻辑的管理方式: 回调, 事件监听。 回调通常用来定 阅读全文
posted @ 2017-06-19 23:51 小碎石 阅读(475) 评论(0) 推荐(0) 编辑
摘要: Events是Node中的一个很重要的核心模块,Stream, 网络,文件系统统统都是继承自这个模块。 Streams模块就是继承自EventEmitter,所以说弄明白Events模块,特别是EventEmitter对象, 对于理解Node中的很多模块都是有好处的。 Stream非常擅长处理数据, 阅读全文
posted @ 2017-06-19 23:44 小碎石 阅读(1341) 评论(0) 推荐(0) 编辑
摘要: Node内置了http模块提供HTTP服务器和客户端接口 var http = require("http"); 创建HTTP服务器只需要简单的调用http.createServer()函数,参数是回调函数,接收两个参数: request, response对象。 var server = http 阅读全文
posted @ 2017-06-18 14:43 小碎石 阅读(1275) 评论(0) 推荐(0) 编辑
摘要: 官网案例地址 http://naltatis.github.io/jade-syntax-docs/ 1. 基本用法 定义了一个变量name, 然后使用#{name}格式来读取变量name值 变量定义的语法 - var variable = value 标签内容放在标签名后面,用一个空格隔开 2. 阅读全文
posted @ 2017-06-08 10:53 小碎石 阅读(695) 评论(0) 推荐(0) 编辑
摘要: 现在的网页设计中,饼图的运用极为普遍。如:简单的统计图表,进度指示器,定时器等等。饼图的技术实现方式也非常多,主要是使用JavaScript配合canvas来实现,从而诞生了一大批的图表绘制JS库。但是单纯使用CSS来实现饼图的技术还是在CSS3推出后才开始出现。 今天就来讲讲基于transform 阅读全文
posted @ 2017-05-31 11:31 小碎石 阅读(1467) 评论(0) 推荐(0) 编辑
摘要: 梯形标签页是一种很常见的网页设计风格 然而现实中大部分实现方案都是利用伪元素来实现两边不平行的线条。 这种方式的弊端就在于可扩展性差,比如添加一圈边框,一层纹理背景,顶部设置圆角等。 今天就来介绍几种合理的解决方案 一、3D变换 当一个元素进行翻转时,如果加上景深perspective属性后会出现近 阅读全文
posted @ 2017-05-30 19:36 小碎石 阅读(485) 评论(0) 推荐(0) 编辑
摘要: clip-path表示剪裁路径,也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。 这里涉及到两个概念: 裁剪路径clipping path,裁剪区域clipping region。 裁剪路径就是用来裁剪元素的路径,标记了需要裁剪的区域。可以是任意形状。 裁剪区域就是裁剪 阅读全文
posted @ 2017-05-29 21:01 小碎石 阅读(1480) 评论(0) 推荐(0) 编辑
摘要: 将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient 阅读全文
posted @ 2017-05-29 21:00 小碎石 阅读(2114) 评论(0) 推荐(0) 编辑