css3中的动画属性+qrcode插件二维码生成+css3滤镜（filter）效果集合

在制作一些特效动画上会用到一些属性，今天来总结一下：

一、css3动画属性

以@keyframes（规定动画）为重点

1)animation-duration：规定动画完成一个周期所花费的时间（秒、毫秒）

2)animation-timing-function:规定动画的速度曲线（linear：速度相同；ease：以低速开始，加速，低速结束；ease-in、ease-out）——————重点：cubic-bezier:函数中的值（0-1），例：animation-timing-function:cubic-bezier(0,0,0.5,0.25);

3）animmation-delay:规定动画何时开始（秒、毫秒）

4）animation-iteration-count：规定动画播放的次数

5）animation-direction：规定是否在下一周期逆向播放

6）@keyframes

注意：keyframes有的浏览器不支持，需要例如（@-moz-keyframes/@-webkit-keyframes等）

    

二、2D/3D转换属性

1）transform：向元素应用2D或3D转换（旋转：rotate；缩放：scale；倾斜：skewX,skewY）

transform-origin：改变转换元素的位置

transform-style：被嵌套元素如何在3D控件中显示

2）perspective：规定3D元素的透视效果

perspective-origin：规定3D元素底部位置

perspective-visibility：定义元素在不面对屏幕时是否可见

 

补充：

常见块级元素：

div/p/h1-h6/hr/ul/ol

行内元素：

a/b/i/u/em/input/select/img/label/br

块级元素与行内元素（内联元素）区别：

块级：独占一行，默认宽度自动填满其父元素宽度，可以设置宽高，可以设置margin、padding;(display:block；)

行内：不会独占一行，相邻的行内元素会拍在同一行，不可以设置宽高，水平方向：margin-left、padding-left等 生效，竖直方向不生效。（display：inline;）

注：可以通过display进行切换块级与行内元素；

三、二维码生成 

 
 
 


	
 
jQuery('#qrcodeTable').qrcode({
		render	: "table",//设置渲染方式，有table和canvas
		text	: "hello",
		width:"155",
		height:"155"
	});	

text是中文会出现乱码

解决：

function toUtf8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }
        var str = toUtf8("我喜欢你"); 
	jQuery('#qrcodeTable').qrcode({
		render	: "table",//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好 
		text	: str,
		width:"155",
		height:"155"
	});	

 

四、css3滤镜(filter)效果集合

img {
  filter: brightness(150%);/*亮度：0%则输出纯黑色。同样的，设置100%的话就为图像原本的亮度。也可以设置大于100%的值，以此提升图像的亮度。设置300%就会将原来图像的亮度提升3倍*/
  filter: contrast(1500%);/*对比度：控制在CSS图像的深色和浅色部分之间的差异。0%则是灰度图像。100％为原始图像，超出100%将进一步提高图像的对比度*/
  filter: contrast(0%);/*灰度：0％的值没有效果，100％的值会变成他们完全灰度。负值是不允许的。*/
  filter: saturate(0%);/*饱和度：0％将彻底从图像中删除所有颜色，而超过100％的值将使图像饱和。设置100％时看起来就像原始图像。负值是不允许的。*/
  filter: sepia(100%);/*褐色：用于控制图片的褐色色调，也就是常见的将图片调为老照片效果。设置0%为原始图像，设置100%为老照片效果。*/
  filter: hue-rotate(90deg);/*色相旋转：适用于色相旋转到图像的所有颜色。
设置0deg时没有效果，取值没有最大值，取值超过360deg时就相当于一个循环，也就是取90deg的效果跟取450deg的效果是一样的。*/
filter: invert(100%);/*反色：反转所有颜色。反转的量取决于设置的值。设置0%的时候没有变换，设置100%的时候则反转所有颜色。*/
filter: blur(1px);/**模糊：用于高斯模糊的图像。把颜色混合在一起，并分布在的边缘上。传递给此过滤器的半径参数来确定屏幕上的交融互进多少像素。取值越大，模糊效果越明显。这个滤镜可以接受任何长度值，除了百分比。*/
 filter: drop-shadow(5px 5px 10px #666);/*阴影效果*/
}