css3 新知识（张鑫旭学）
1.图片添加滤镜
给图片添加滤镜，背景图是加的图片，然后给图片mix-blend-mode: screen;就可以实现图片滤镜；
给图片添加filter: hue-rotate(180deg);可以使图片变色
2.图片切换转场动画
.in {
animation: clipCircleIn .6s;
}
@keyframes clipCircleIn {
0% {
clip-path: circle(0 at 50% 50%);
}
100% {
clip-path: circle(200px at 50% 50%);
}
}
使用的是clip-path中的circle方法，语法是：
circle(半径 at 圆心坐标)
圆心默认是50% 50%也就是元素的中心，因此，这里的css代码也可以简化成
原理很简单：动画0%开始时候圆的剪裁半径是0，于是整个图像元素都不可见；动画100%结束的时候，圆的剪裁半径是200像素，于是整个图像元素就可见了。clip-path属性是支持CSS animation动画的，因此可以看到一个图片元素从0到有，圆形呈现的效果。
使用也很简单，在需要呈现的元素上添加类名.in就可以了，不仅可以写在图片元素上，任意的<div>, 甚至整个<body>页面都可以。
根据图片形状来实现文字排版；
.infos{
shape-outside: url(birds.png);//主要是这个特性
background-color: #cd0000;
mask: url(birds.png) no-repeat;
width: 200px; height: 300px;
-webkit-mask: url(./birds.png) no-repeat;
float: left;
padding: 10px;
}
