赞过
文章
问答
专栏
赞过
Css
CSS 小技巧 | 一行代码实现头像与国旗的融合

CSS 小技巧 | 一行代码实现头像与国旗的融合

到国庆了，大家都急着给祖国母亲庆生。每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：emm，很不错。那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用CSS如何简单实现呢？有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只能看到红旗看不到原本的头像内容，而最右边基本只能看到头像而不再显示红旗的红色背景。在CSS中使用mask遮罩，一行代码实现头像与国旗的融合在CSS中，我们仅仅需要将两张图片叠加在一起，对上层的图片使用mask属性，一行代码
Css
巧用 CSS 实现炫彩三角边框动画

巧用 CSS 实现炫彩三角边框动画

最近有个小伙伴问我，在某个网站看到一个使用SVG实现的炫彩三角边框动画，问能否使用CSS实现：很有意思的一个动画效果，立马让我想起了我在CSS奇思妙想边框动画一文中介绍的边框动画，非常的类似：其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。然而，这个三角形动画里有两个难点：整个图形是个三角形在CSS中，我们可比较轻松的实现矩形与圆形，但是三角形这里无疑会棘手很多。整个边框还附带阴影，并且阴影还是在边框的两侧这里看似不复杂，实则困难重重，如果采用
猜你喜欢
换一换
最新文章
更多