随笔分类 - html5+css3
1
摘要：windows下面安装node-sass，确实令人头痛，正确姿势如下： 1、npm或yarm指定淘宝镜像 查看镜像 # npm命令 npm config get registry # yarn命令 yarn config get registry 修改为淘宝镜像 # npm命令 npm config
阅读全文
摘要：clip path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。clip path属性代替了现在已经弃用的剪切 clip属性。clip path的属性值可以是以下几种： clip path属性值为inset； inset是将元素剪切为一个矩形，如cl
阅读全文
摘要：第一种，flexible布局： rem=px/50; 第二种，media css实现： rem=px/20
阅读全文
摘要：AlloyTouch 是来自于腾讯AlloyTeam团队开发的一个适用用移动端的js组件库。 特性： 1、丰富的组件 选择组件、级联选择组件、轮播组件、全屏滚动组件、下拉刷新组件、上拉刷新任君选择 2、超小的尺寸 压缩之后6.84K, GZIP之后2.24K 3、简单的API 超级简单的API,一分
阅读全文
摘要：一、链接CSS文件直接使用； 基本上你链接直接在Google.com上的CSS文件。通过网址参数，你可以选择你想要的字体，以及这些字体的变化。 二、使用JS加载字体库 参考：https://css-tricks.com/snippets/css/basics-of-google-font-api/
阅读全文
摘要：先来看DEMO吧，http://codepen.io/jonechen/pen/ZOyxmq HTML部分： JS部分：
阅读全文
摘要：1. getElementsByClassName()方法 getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。 2. classList 属性 add(value)：将给
阅读全文
摘要：1.矩形 绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。2.圆角矩形 绘制圆角矩形也很简单，在1的基础上，在使用css3的border-radius，即可。3.圆 根据圆的特性，在2的基础上，设置div的宽和高一直，为正方形，然后设置border-radius为50%即可
阅读全文
摘要：CSS代码： HTML： DEMO地址：http://codepen.io/jonechen/pen/JXwzKQ
阅读全文
摘要：CSS： HTML: JS： DEMO地址：http://codepen.io/jonechen/pen/vGWZQW 上面这个demo已经实现了百分比圆环进度，但是不足的是，使用了div和canvas两个元素的组合，可以再进化一下，HTML部分去掉div，都使用canvas来实现；见代码： CSS
阅读全文
摘要：在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再
阅读全文
摘要：在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。 steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默
阅读全文
摘要：DEMO地址：http://codepen.io/jonechen/pen/eZpgWd 不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有： 1、canvas的基本绘图；2、js各个事件的监听；3、js动画；4、三角函数结合js在canvas中的基本应
阅读全文
摘要：根据慕课网视频制作的，纯粹是当作一个记录，在这个DEMO中，涉及到了许多SVG的知识，基本适口的设置、绘图API、clip-path、mask蒙板的使用、animateTransform动画；
阅读全文
摘要：-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。一共有10种最基本的特效，下来这个DEMO很好的展示了这些效果： 用法是标准的CSS写法，如：-webkit-filter: blur(2px)；关于浏览器的支持，在caniuse.com 里可以看到
阅读全文
摘要：animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。 关于这三个，很好理解；具体请看demo 这是一个大小匀速变化的圆，当animation的填充模式为backwards的时候，可以看到，小圆缩小后直至没有了，说明保持了最后一帧；当animation的填充模式为
阅读全文
摘要：DEMO地址：http://codepen.io/jonechen/pen/xVbPLJ
阅读全文
摘要：利用SVG可以实现很多复杂的图形，SVG的功能开发者们已经开发许多，今天初识一下SVG的基本图形绘制， 在上面的代码中，我们可以看到绘制了圆，矩形，多边形，关于这些图形的基本属性在上面的代码已经得到了很好的体现，并且有一个transform属性，这个和CSS3的transform区别不大，唯一需要注
阅读全文
1
