CSS 如何将动画绑定到分割元素

通常我们使用分割元素（也称为<div>）来对HTML元素进行分组，并且通过使用CSS对其进行样式设置。动画是一种具有视觉效果的图形元素，使其更具吸引力。在HTML和CSS中，我们通常将这种元素称为<div>。本文将解释CSS如何将动画绑定到分割元素。

使用keyframes方法定义动画

keyframes方法是在CSS中创建动画效果最常用的方法。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      width: 50vw;
      height: 10vh;
      background-color: rgb(103, 28, 141);
      animation: myAnimation 2s infinite alternate;
   }
   @keyframes myAnimation {
      0% {
         transform: translateX(0);
      }
      50% {
         transform: translateX(100px);
      }
      100% {
         transform: translateX(200px);
      }
   }
</style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

解释

HTML代码通过class为”container”的division元素进行动画处理。动画定义在@keyframes规则中，将元素从0像素向右移动100像素，然后再向右移动200像素，以此循环交替进行。
CSS代码定义了”class”为”container”的元素的宽度为视口的50%，高度为视口高度的10%，背景颜色为紫色。通过使用”animation”属性将动画应用于元素，属性值为”myAnimation 2s infinite alternate”。该division元素包含在HTML的body中，在Web浏览器中查看时将应用该动画。

使用clip-path

如果你理解了前面的示例，你可能已经观察到，要产生一个非常复杂的动画是相当困难的，因为它要求我们手动编写如此多的代码行。因此，我们可以使用许多其他工具来实现令人赞叹的动画效果。一个这样的示例就是使用clip-path。

clip-path是一种CSS属性，允许您指定要显示（裁剪）的元素的特定区域，同时隐藏其余部分。
我们可以通过裁剪路径来定义该区域，裁剪路径可以使用基本形状（如圆形、矩形、多边形或SVG路径）来创建。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   .container {
      background-color: rgb(220, 221, 158);
      width: 50vw;
      padding: 20px;
      text-align: justify;
      border-radius: 20px;
      clip-path: circle(23.2% at 100%);
   }
   .container:hover {
      clip-path: circle(141% at 100%);
      transition: 1s;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Hello world</h1>
      <p>This is the body of the text</p>
   </div>
</body>
</html>

解释

这里，HTML文档设置了一个弹性容器，以行的形式显示子元素，水平和垂直居中。body的高度为100vh，.container类具有带有悬停过渡效果的圆形裁剪蒙版。
.container类具有背景颜色、宽度、边距和文本对齐，边框半径为20像素，使用clip-path属性创建一个圆形蒙版。悬停伪类使用1s的过渡效果改变clip-path的大小。