文章关键字 ‘clipPath’

今天学习SVG滤镜feGaussianBlur和feDropShadow

2024年04月14日,星期日

动漫 美女 钓鱼

模糊和投影算是SVG滤镜中学习难度最低的元素了,所以放在一起介绍,从中可以看到CSS模糊和投影滤镜语法的影子。

阅读全文…

介绍一种全新的clipPath Sprites小图标技术

2020年10月30日,星期五

剪裁图标合集技术

本文介绍一种全新的SVG图标合集技术,有别于传统的<symbol>元素,这里使用的是<clipPath>元素,配合CSS clip-path属性使用,优势在于HTML标签任意,UI样式任意,本文内容一定会对您的学习有所帮助。

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日,星期二

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

CSS3/SVG clip-path路径剪裁遮罩属性简介

2014年12月22日,星期一

CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族!

所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性,可以游走于SVG属性和CSS属性之前。本文中等篇幅,中等难度,丰富的源代码展示,丰富的demo页面,丰富的截图,还有必要的gif演示,总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…