<path fill="url(#mask-rigth-to-left)" d="M0,0 L${padding + patch},${padding}L${padding + patch},${svgHeight - padding}L0,${svgHeight}Z"></path> <path fill="url(#mask-left-to-right)" d="M${svgWidth},0 L${svgWidth - padding - patch},${padding}L${svgWidth - padding...
background: url(image.png); mask: linear-gradient(135deg, transparent 15px, #fff 0) top left, linear-gradient(-135deg, transparent 15px, #fff 0) top right, linear-gradient(-45deg, transparent 15px, #fff 0) bottom right, linear-gradient(45deg, transparent 15px...
mask-repeat: no-repeat; 得到的效果如下: CodePen Demo -- 使用 MASK 实现图片切角遮罩[2] 当然,实现上述效果还有其他很多种方式,譬如 clip-path,这里的 mask 也是一种方式。 多张图片下使用 mask 上述是单张图片使用 mask 的效果。下面我们看看多张图片下,使用 mask 能碰撞出什么样的火花。 假设我们有两张...
-webkit-mask-position: 0; -webkit-mask-size: 50%; } 3、box-reflect() 倒影 box-reflect:none | direction offset mask-box-image 3.1. direction 倒影在对象的位置 above 上 below 下 left 左 right 右 3.2. offset: 用长度值来定义倒影与对象之间的间隔,可以为负值 length | percentage 3.3. mask-b...
background: url(image.png) ; mask: linear-gradient(90deg, transparent, #fff); } 应用了 mask 之后,就会变成这样: 这个 DEMO,可以先简单了解到 mask 的基本用法。 这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent...
.scene-2{background-image:url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd9e83460a5645ccb78dc1c8efb86871~tplv-k3u1fbpfcp-watermark.image?);-webkit-mask-image:linear-gradient(to right,transparent 8%,#fff 30%);} 1.
(https://assets.codepen.io/77020/sw-horizontal-wipe-scene-2.jpg);-webkit-mask-image:linear-gradient(toright,transparent47.5%,#fff52.5%);-webkit-mask-size:210%;-webkit-mask-position:left;}.scenes:is(:hover,:focus).scene-2{-webkit-mask-position:right;transition:-webkit-mask-position2s...
.scene-2 {background-image: url(https://assets.codepen.io/77020/sw-horizontal-wipe-scene-2.jpg);-webkit-mask-image: linear-gradient(to right,transparent 47.5%,#fff 52.5%);-webkit-mask-size: 210%;-webkit-mask-position: left;}.scenes:is(:hover, :focus) .scene-2 {-webkit-mask-positi...
CSS mask-image + SVG 简化一下,把地图换成图片,实现一个示例。 示例中,注释掉“mask”标记的内容,恢复“svg test”标记的内容,可以查看 svg 。 准备工作,定义一个“容器”和“目标”层: <!-- svg test --><!-- --> 基础样式: body{margin:0;background-color: black; }#container{position: abso...
(https://assets.codepen.io/77020/sw-horizontal-wipe-scene-2.jpg);-webkit-mask-image:linear-gradient(to right,transparent 47.5%,#fff 52.5%);-webkit-mask-size:210%;-webkit-mask-position:left;}.scenes:is(:hover, :focus) .scene-2{-webkit-mask-position:right;transition:-webkit-mask-...