『 tydumpling博客 』

Appearance

clip-path 实现裁剪 ​

作者:Yuan Tang
更新于:5 个月前
字数统计:1.4k 字
阅读时长:6 分钟

前置知识 ​

clip-path

CSS
https://developer.mozilla.org/zh-CN/docs/Web/CSS
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

语法：

css
/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

clip-path 属性指定为下面列出的值的一个或多个值的组合。

取值：

备注： CSS 计算值不为 none 时，会创建新的

层叠上下文
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
，就像 CSS
`opacity`
https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity
 的值不为 1 时那样。

形式定义:

初始值
https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial_value
none
适用元素all elements; In SVG, it applies to container elements excluding the
`defs`
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/defs
 element and all graphics elements
是否是继承属性
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Inheritance
否
Percentagesrefer to reference box when specified, otherwise border-box
计算值
https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value
as specified, but with
`url`
https://developer.mozilla.org/zh-CN/docs/Web/CSS/url
 values made absolute
Animation typeyes, as specified for
`basic-shape`
https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape
, otherwise no

形式语法:

css
clip-path = 
  <clip-source>                        |
  [ <basic-shape> || <geometry-box> ]  |
  none                                 

<clip-source> = 
  <url>  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  

<shape-box> = 
  <box>       |
  margin-box  

<box> = 
  border-box   |
  padding-box  |
  content-box

实现 ​

  1. 相框显示，鼠标移入后显示全部，移出则裁剪为四方形。这里用到的是多边形裁剪 polygon ，代码如下：

    html
    <style>
    .container {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        background: #14100f;
    }
    
    .box {
        width: 100%;
        height: 100%;
        display: block;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        transition: .5s;
    }
    
    .container:hover .box {
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
</style>

    实际上就是把四个点的横纵坐标移动一下。这里推荐一下多边形 clip-path 的在线样式裁剪网址：

    CSS3剪贴路径（Clip-path）在线生成器工具
    http://tools.jb51.net/code/css3path
    。

  2. 眨眼效果，该效果主要实现的原理是动画搭配椭圆裁剪 ellipse 实现。设置动画，在不同的关键帧定义不同的椭圆半径，代码如下：

    css
    @keyframes wink {
    15% {
        clip-path: ellipse(50% 1% at 50% 50%);
    }
    30% {
        clip-path: ellipse(50% 19% at 50% 50%);
    }
    45% {
        clip-path: ellipse(50% 1% at 50% 50%);
    }
    70% {
        clip-path: ellipse(50% 40% at 50% 50%);
    }
}

  3. 文字下落，该效果的本质是通过矩形的裁剪实现，原理如下：

    一个矩形动画开始时其上方裁剪 100% 的区域，此时它是一条线，无法显示内容；然后动画结束时把上方裁剪的区域恢复为 0% ，这样文字就能从下往上显示。

    想要实现从下往上只需要给起始动画设置 Y 轴的偏移量为 100% 即可。代码如下：

    css
    @keyframes fall {
    0% {
        clip-path: inset(100% 0% 0% 0%);
        transform: translateY(-100%);
    }
    100% {
        clip-path: inset(0% 0% 0% 0%);
    }
}

  4. 水平位移，实际上是通过多边形裁剪实现，鼠标移出时不渲染该部分内容，鼠标移入时再显示。代码如下：

    html
    <style>
    .img-box img:nth-child(2) {
        clip-path: polygon(-30% 0, -30% 0, 0% 50%, -30% 100%, -30% 100%);
    }
    .img-box:hover img:nth-child(2) {
        clip-path: polygon(-30% 0, 100% 0, 110% 50%, 100% 100%, -30% 100%);
    }
</style>

Contributors ​

Yuan Tang

Copyright © 2023-present tydumpling