CSS3 之高级动画（6）CSS3 clip-path属性实现的几何图形变形动画

最新推荐文章于 2024-05-31 09:45:29 发布

weixin_30443075

最新推荐文章于 2024-05-31 09:45:29 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/houfee/p/10613355.html

本文介绍CSS中的clip-path属性，该属性用于定义元素可见区域的形状，通过不同的多边形定义来展示元素的不同部分，支持SVG路径语法。文章提供了一个动态变换剪切区域的例子，展示了如何结合动画和背景图片创造视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clip-path

属性介绍：

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。

区域内的部分显示，区域外的隐藏。

剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径。

使用：

不可思议的CSS之clip-path

css中clip-path属性的运用

具体还支持SVG路径

maker工具，你画好图形，代码就在下面: http://bennettfeely.com/clippy/

主流浏览器支持情况：

效果实现：

html:

<div></div>

css:

html,
body {
  height: 100%;
}

body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #999999;
}

div {
  width: 75vmin;
  height: 75vmin;
  -webkit-animation: shape 10s ease-in-out infinite both;
  animation: shape 10s ease-in-out infinite both;
}

@-webkit-keyframes shape {

  from,
  to {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') center;
  }

  14.28571% {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') left top;
  }

  28.57143% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    background: url('./267323.jpg') right bottom;
  }

  42.85714% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    background: url('./267323.jpg') left bottom;
  }

  57.14286% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    background: url('./267323.jpg') right top;
  }

  71.42857% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    background: url('./267323.jpg') right right;
  }

  85.71429% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    background: url('./267323.jpg') left center;
  }
}

@keyframes shape {

  from,
  to {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') center;
  }

  14.28571% {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') left top;
  }

  28.57143% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    background: url('./267323.jpg') right bottom;
  }

  42.85714% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    background: url('./267323.jpg') left bottom;
  }

  57.14286% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    background: url('./267323.jpg') right top;
  }

  71.42857% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    background: url('./267323.jpg') right right;
  }

  85.71429% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    background: url('./267323.jpg') left center;
  }
}