给图片添加滤镜，背景图是加的图片，然后给图片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-pathcircle
circle(半径 at 圆心坐标)
圆心默认是也就是元素的中心，因此，这里的css代码也可以简化成50% 50%
原理很简单：动画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; }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
