推荐
最新
热榜
Css
高阶切图技巧！基于单张图片的任意颜色转换

高阶切图技巧！基于单张图片的任意颜色转换

今天，要介绍一种基于CSSmask-composite的高级技巧。通过掌握它，我们可以通过一张图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张PNG/SVG得到它的反向切图事情的经过是这样的，某天，我们拿到了这样一张PNG/SVG图片：就这张图片而言，它是一张PNG图，灰色部分透明。随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：怎么办呢，通常而言，只能是找UI再出一张镂空图。当然，在今天，只需
Css
神奇的滤镜！巧妙实现内凹的平滑圆角

神奇的滤镜！巧妙实现内凹的平滑圆角

背景某日，群友们在群里抛出这样一个问题，如何使用CSS实现如下的布局：在CSS世界中，如果只是下述这种效果，还是非常容易实现的：一旦涉及到圆角或者波浪效果，难度就会提升很多。实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用CSS实现上述内凹平滑圆角效果的一些可能的方式。利用圆的衔接实现第一种方法比较笨。我们可以使用多个圆的衔接实现。首先，我们会实现一个内部挖出一个矩形的矩形：<div></div>复制代码核心CSS代码如下：div{hei
Css
巧用 CSS 实现炫彩三角边框动画

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

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