css3 新知识（张鑫旭学）

最新推荐文章于 2021-08-04 07:47:52 发布

weixin_30748995

最新推荐文章于 2021-08-04 07:47:52 发布

阅读量203

点赞数

原文链接：http://www.cnblogs.com/aotuboke/p/10939262.html

版权

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;
}

转载于:https://www.cnblogs.com/aotuboke/p/10939262.html

weixin_30748995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 新知识（张鑫旭学）

1.图片添加滤镜给图片添加滤镜，背景图是加的图片，然后给图片mix-blend-mode: screen;就可以实现图片滤镜；给图片添加filter: hue-rotate(180deg);可以使图片变色2.图片切换转场动画.in { animation: clipCircleIn .6s;}@keyframes clipCircleIn { 0% ...
复制链接

扫一扫