给图片添加滤镜,背景图是加的图片,然后给图片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; }