本文详细解释了CSS动画是如何使用CSSclip-path() 属性的。在文章结束时，你将对CSS动画有一个透彻的了解，并知道如何操作你可能遇到的任何clip-path() 代码。
什么是CSS动画？
CSS动画允许你使用关键帧在特定的时间段内对CSS属性的值进行动画处理。关键帧是理解CSS动画的众多构建模块之一。
有两个主要的构件可以使CSS动画生效。它们是
@keyframesanimation属性
在CSS中使用@keyframes
@keyframes 是CSS中的一个at-rule。它用于定义动画的阶段和样式。它包括动画的名称、关键帧块、以及动画的阶段。
1.动画的名称
你在@keyframes 后指定动画的名称。它也叫关键帧名称。
让我们创建一个允许文本弹出的动画，称为popIn 。
@keyframes popIn {}
2.关键帧块
这封装了整个动画的代码。
@keyframes popIn {
/* This is the keyframes block */
}
3.动画的阶段
动画的阶段--也叫关键帧选择器--包含决定动画行为的CSS代码。这些CSS代码位于一对from 或to 块中，以逗号分隔的百分比值，或两者的组合。
@keyframes popIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
你也可以将from 或to 块与逗号分隔的百分比值结合起来，这意味着你可以将前面的代码块写成这样。
@keyframes popIn {
from {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
to {
transform: scale(1);
}
}
为什么？这是因为from 等同于0% ，to 等同于100% 。
请注意，如果你在前面的代码块中把60% 写成60 ，浏览器会在这个阶段忽略这个动画，这可能会导致难以追踪的错误。
现在你已经创建了关键帧，你将使用动画属性将关键帧添加到你想做动画的元素中。
CSS中的动画属性
这些属性将@keyframes 给你想做动画的元素，它们还定义了元素的动画方式。它们对于动画的运行是必要的。
虽然有9个属性，但以下两个属性对动画的发生是必需的。
animation-name：这是在关键帧中定义的动画名称animation-duration：这告诉动画将发生多长时间，以秒或毫秒为单位。
在这个时候，你几乎拥有了创建一个动画所需要的一切。继续阅读。
动画实例。PopIn
现在，我们必须确定要制作动画的元素，当然，这是一个HTML元素。你可以通过你合适的选择器从CSS中抓取这个HTML元素，但在这里我将使用一个类选择器。
在继续进行之前，请创建以下内容。
- 一个项目文件夹
- 模板HTML文件
- CSS文件
- 将HTML文件与CSS文件连接起来
- 复制并粘贴
popI动画到你的CSS文件中
在你的HTML文件中，在开头和结尾的body 标签之间输入下一个代码块。
<div>
<p class="hello-world">Hello World!!!</p>
</div>
除了你在CSS文件中的@keyframes ，再输入以下内容。
.hello-world {
animation-name: popIn;
animation-duration: 3s;
}
就这样了。保存你的文件并在你的浏览器中测试它们。"Hello world!!!"这句话应该跳出来。
此外，你可以把前面的代码块写成这样。
.hello-world {
animation: popIn 3s;
}
这是有可能的，因为animation 属性是下一节中列出的所有其他动画属性的速记（不包括animation 属性本身）。
其他的CSS动画属性
下面列出的是其余的动画属性。
animationanimation-delayanimation-directionanimation-fill-modeanimation-iteration-countanimation-play-stateanimation-timing-function
这些属性的功能从它们的名字中就可以看出来，但我认为当你看到它们的动作时才是最好的解释。稍后，我们将使用clip-path() 属性来创造一些很酷的效果。
不过在此之前，你需要了解一下clip-path() 属性。
什么是CSSclip-path() ？
CSSclip-path() 是一个属性，它允许你从一个元素中创建一个剪裁区域。在这个剪裁区域内的区域会被显示出来，而其他部分则被隐藏。
起初，clip-path() 可能令人望而生畏，但一旦你理解了它背后的几何学原理，它就变得很容易使用了。
CSSclip-path() 坐标系统
在CSS中，clip-path() ，当你在一个坐标系上指定形状和位置时，你可以创建形状的剪裁区域。
坐标系统使用坐标来确定各点在特定空间中的位置。这里有一个例子。
从上面的图片来看，坐标的起点是x0, y0 。当你顺时针移动时，最终的位置仍然是x0, y0 。
掌握了这些知识，你可以使用CSS clip-path() ，在这个坐标系上创建和定位形状。这要归功于它的接受值阵列。
CSSclip-path() 的接受值
CSSclip-path() 的接受值是接受参数的函数。这些参数决定了被剪切区域的外观和位置。
下面列出了这些函数。
inset()circle()ellipse()path()polygon()
inset()
inset() 函数允许你从坐标系的所有四边剪切一个元素。其结果是一个可见的矩形。
你给inset() 的赋值方式与你给margin 或padding 属性的赋值方式类似。
这意味着。
- 一个单一的值适用于所有四边
- 两个值适用于顶部和底部、右侧和左侧
- 三个值适用于顶部、右侧和左侧、底部（按这个顺序）。
- 所有四个值都适用于单个侧面
作为一个例子，下面的图片显示了一个蓝色的盒子占据了它的整个父体宽度。
下一个代码块从其父体的所有四边夹住该盒子。
.selector {
clip-path: inset(20px 30px 35px 20px);
}
现在，你有了这个。
同时，inset() ，有了额外的权力！你可以指定border-radius作为其参数之一。你必须使用round 关键字，然后是border-radius 的值，如下一个代码块中所描述的。
.selector {
clip-path: inset(20px 30px 35px 20px round 20px);
}
你也可以通过在round 关键字后面指定两个值来将圆角限制在两个边上。
当你这样做时，第一个值被分配到左上角和右下角，而第二个值被分配到右上角和左下角。
.selector {
clip-path: inset(20px 30px 35px 20px round 20px 50px);
}
circle()
它的名字说明了一切。它允许你使用圆的半径和它的位置在坐标系上画一个圆。
.selector {
clip-path: circle(100px at 40%)
}
从前面的代码块来看，圆的半径是100px ，它在x轴和y轴上的位置是40% 。
ellipse()
这允许你创建一个椭圆形的剪裁。它的参数是宽度、高度（后面是关键字），然后是剪裁位置。
位置可以通过关键字值来指定，如center 或percentage 。在下一个代码块中，50% 50% 相当于center 关键字。
.selector {
clip-path: ellipse(80px 60px at 50% 50%);
}
path()
如果使用可扩展矢量图（SVG）是你的事，你将需要path() 函数，它允许你使用SVG路径来创建一个剪裁区域。
浏览器的支持是不一致的，如下面的Can I Use图片所示。
为了解决这个问题，你可以在你的HTML文件中声明一个内联SVG。在你的CSS中，你将使用url() 函数作为clip-path() 的值。
<div class="myClip">
<svg>
<clipPath id="clipPath">
<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
</clipPath>
</svg>
</div>
然后，在你的CSS中。
.myClip {
background-color: #1560bd;
clip-path: url("#clipPath");
}
下一张图片是现代浏览器中的结果。
polygon()
使用polygon() 的值，你可以创建复杂的形状。下面是我们要做的事情。我将带领你完成在坐标系上绘制一些形状的过程。之后，你将把这些坐标作为参数传递给你的CSS文件中的polygon() 函数。
下面是我们要讨论的形状。
- 平行四边形
- 朝下的圆点
- 五角形
- 钻石
平行四边形
如果你想创建一个平行四边形，你将在坐标系上以顺时针的方式使用以下近似的点。
x20, y0x80, y0x70, y100x10, y100x20, y0
我画这个是为了告诉你如何在坐标系上定位这些点。
当你把坐标放在polygon() 函数中时，你可以通过一个微小但关键的修改来定制它：百分比符号（%）。
.selector {
background-color: #1560bd;
clip-path: polygon(20% 0%, 80% 0%, 70% 100%, 10% 100%);
}
下面是在现代网络浏览器中查看时的结果。
朝下的圆点
绘制朝下的圆点没有平行四边形那么复杂。下面是坐标。
x0, y0x100, y0x50, y100x0, y0
在CSS中。
.selector {
background-color: #1560bd;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
在现代浏览器中的结果如下所示。
五角大楼
这一次，我没有包括坐标。我把这个问题留给你 ，或者，你可以查看上一张图片或下一个CSS代码块。
的CSS。
.selector {
background-color: #1560bd;
clip-path: polygon(50% 0%, 100% 45%, 80% 100%, 20% 100%, 0% 45%);
}
在你的浏览器中，它看起来应该与下面的图片相似。
钻石
希望这对你来说现在很容易做到。下面是它的外观。
，这是CSS。
.selector {
background-color: #1560bd;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
在现代浏览器中看到的：
现在，你可能会问自己：我还能做什么？
好吧，有了polygon() ，你只能受限于你的想象力 。
现在，是时候通过结合动画和CSS创造一些很酷的效果了clip-path() 。
CSS动画和CSSclip-path()
当你给一个元素制作动画时，你可以使用clip-path() ，在动画的各个阶段创建一个剪裁区域，创造出元素确实在改变形状的假象。
你可以在给元素做动画之前和之后都对其进行剪裁。
让我们来看看一些例子。在整个过程中，你会写大量的CSS代码，但我将专门解释动画和clip-path() 属性的代码。其余的被认为是化妆品。
下面列出的是你将使用clip-path() 创建的动画。
Infinite circlesDancing squaresFlipping shapesMulti-shapes image animation
在CSS中创建无限的圆圈
这个无限的圆是通过在动画的不同阶段向circle() 传递不同的值来实现的。当你把它添加到你想做动画的元素中时，你就能确保动画一直在运行。
这怎么可能呢？因为你利用了其中的一个动画属性，即animation-iteration-count ，并指定其值为infinite 。
在此之前，使用下面的HTML。
<main>
<div class="circles"></div>
</main>
CSS代码列在下一个代码块中。
main {
display: grid;
place-items: center;
padding: 2em;
}
.circles {
background: #1a1a1a;
clip-path: circle(80px at 50% 50%);
height: 200px;
width: 200px;
border-radius: 50%;
animation-name: infiniteCircle;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
@keyframes infiniteCircle {
from {
background: #f00;
clip-path: circle(50%);
}
50% {
background: #ffd700;
clip-path: circle(35%);
}
to {
background: #f0f;
clip-path: circle(75%);
}
}
在现代浏览器中的输出在下面的GIF中描述。
跳舞的方块
这个名字再次说明了一切：会跳舞的方块。首先，在坐标系上用polygon() 绘制初始的正方形，然后在动画的不同阶段绘制与正方形密切相关的各种形状。
最后，让动画无限地运行。对于HTML，你可以使用上一节中的内容，并稍作修改：将main 中的div 的类名改为squares 。
CSS代码在下面。
main {
display: grid;
place-items: center;
padding: 2em;
}
.squares {
width: 250px;
height: 250px;
background-image: linear-gradient(to right, #000000, #e74c3c);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
animation-name: dancingSquares;
animation-duration: 4s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
@keyframes dancingSquares {
25% {
background-image: linear-gradient(to right, #f0c27b, #4b1248);
clip-path: polygon(20% 0%, 100% 40%, 70% 100%, 10% 100%);
}
50% {
background-image: linear-gradient(to right, #c21500, #ffc500);
clip-path: polygon(0% 45%, 100% 20%, 50% 75%, 0% 100%);
}
75% {
background-image: linear-gradient(to right, #00d2ff, #3a7bd5);
clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0% 53%);
}
}
下面是输出的GIF图片。
形状的翻转
这个动画背后的想法是用clip-path() ，围绕一个元素创建一个形状，之后在动画阶段将其翻转为另一个形状。
在这个例子中，这个元素是一个图像。
这里是HTML。
<main>
<img src="path-to-your-image" alt="The image all text" />
</main>
还有CSS。
main {
display: grid;
place-items: center;
padding: 2em;
}
img {
width: 600px;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
animation-name: flippingShapes;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes flippingShapes {
from {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
50% {
clip-path: polygon(50% 50%, 90% 88%, 80% 10%, 20% 10%, 8% 90%);
}
to {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
}
结果显示在下面的GIF中。
多形状的图像动画
在这个动画中，你将使用clip-path() ，在一个元素周围创建你想要的形状。在动画阶段，你会创建更多想要的形状。
最后，当你把动画附加到元素上时，你把它的animation-iteration-count 设置为无限大。
你将使用下面的HTML。
<main>
<div class="container">
<img src="multi.jpg" alt="Two brown Tiger cubs">
</div>
</main>
CSS在下一个代码块中列出。请注意，关键词from 和to 与逗号分隔的百分比值混合使用。
main {
display: grid;
place-items: center;
padding: 2em;
}
img {
max-width: 100%;
}
.container {
width: 30em;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
animation-name: changeShapes;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes changeShapes {
from {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
50% {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
75% {
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
to {
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
}
在现代浏览器中的结果在下一个GIF中得到了说明。
在CSS中制作动画时需要考虑的重要提示
浏览器和CPU速度
你可能拥有一个CPU速度很快的高端系统，所以你可能不会注意到你的动画的内存消耗。请记住，你的用户可能拥有一个CPU速度较低的系统。
这在下一个GIF中得到了说明。在GIF中，在动画开始之前，Firefox的CPU利用率是3.3% ，而当动画运行10秒后，CPU利用率增加到24.5% 。
请注意这一点，除非是绝对必要，否则不要让你的动画无限地运行。
可访问性
在我们的例子中，我们把animation-iteration-count 设置为infinite ，所以动画会一直运行，直到你关闭活动的浏览器窗口。
然而，你应该为你的用户提供一种机制，让他们能够随意地启动和停止动画，或者通过animation-iteration-count ，限制动画的迭代。
浏览器支持
不是每个人都能使用现代浏览器。考虑到这一点，你应该使用像Can I use这样的工具，在你的项目中使用它们之前确认浏览器对CSS属性的支持。
The postA guide to CSS animations using clip-path()appeared first onLogRocket Blog.
