02 2018 档案

browserSync 工具

摘要：browserSync官网：https://browsersync.io/ browserSync这个工具，配置完成后，当保存文件后，CSS等的变化就会注入到浏览器上，而无需刷新屏幕。它还能通过WIFI将不同设备上的浏览器刷新。甚至可以同步滚动和点击。 1：install node.js. 2:in 阅读全文

posted @ 2018-02-26 11:08 艾路阅读(127) 评论(0) 推荐(0) 编辑

CSS3 动画效果

摘要：相比较3D变形，CSS3动画的支持度更高。CSS3动画由两部分组成：首先是关键帧声明，然后是在动画属性中使用该关键帧声明。可以设置多个关键帧选择器（用百分比定义）。可以把它们想象成时间轴上的点。也可以使用关键词：等价于0%和100%的关键词：form，to。只是WebKit内核的浏览器对from 阅读全文

posted @ 2018-02-23 12:20 艾路阅读(105) 评论(0) 推荐(0) 编辑

CSS 变形动画水平，垂直翻转元素

摘要：CSS3的2D变形属性，scale：用来缩放元素（放大和缩小），translate:在屏幕上移动元素（上下左右），rotate:按照一定角度旋转元素（单位为度），skew:沿X和Y轴对元素进行斜切，matrix:允许以像素精度来控制变形效果。变形是在文档外发生的。一个变形的元素不会影响它附近未变形元阅读全文

posted @ 2018-02-23 11:40 艾路阅读(1675) 评论(0) 推荐(0) 编辑

CSS3中的动画

摘要：css3主要通过三个代理完成大部分动画工作。过渡(transition)，变形(transform)和动画(animation)。当知道动画的起始状态和终止状态，并且需要一个简答的变形方法时，使用CSS过渡(transition)。当需要在视觉上改变某个元素但又不想影响页面布局的时候，使用CSS 阅读全文

posted @ 2018-02-12 18:26 艾路阅读(128) 评论(0) 推荐(0) 编辑

SVG可伸缩矢量图

摘要：SVG是响应式设计中十分重要的一项技术。它是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术。 web领域中的图像，png,jpg都是它们的可视数据保存为像素形式。放在两倍宽高上，就会有局限性。除了最小的图片资源，如果可能的话，使用svg替换png。这样可以产生和分辨率无关的图片，而且大小也比位图阅读全文

posted @ 2018-02-06 16:58 艾路阅读(144) 评论(0) 推荐(0) 编辑

CSS3 高级技术

摘要：盒阴影容许在元素的内部或者外部创建盒状的阴影效果。它们遵循相同的语法：水平偏移值、垂直偏移值、模糊距离、阴影尺寸，以及阴影颜色。.shadow{ box-shadow:0 3px 5px #444;}默认的box-shadow是设置在元素外部的。另外一个可选关键词inset容许在元素内部使用box- 阅读全文

posted @ 2018-02-05 18:37 艾路阅读(159) 评论(0) 推荐(0) 编辑

快速更新package.json文件

摘要：前端框架更新快速，频繁。假如环境是npm，可以通过以下命令行快速更新依赖文件。 npm i -g npm-check-updates ncu-u -a 命令会将当前package中文件更新到最新版本。有些依赖文件可能不支持最新版本，更新完后，手动修改后就可以install了。阅读全文

posted @ 2018-02-05 15:50 艾路阅读(933) 评论(0) 推荐(0) 编辑

一些CSS3特性

摘要：文本多列展示。 column-width:12em;设定列宽。改变视口宽度会动态改变列数。假如想让列数固定，宽度可变。可以写成column-count:4;column-gap:2em;设置劣间间距。column-rule:thin dotted #999;设置列之间的分割线样式。多列布局中，如果每阅读全文

posted @ 2018-02-01 18:42 艾路阅读(155) 评论(0) 推荐(0) 编辑