📌  相关文章
📜  在 CSS 中使用剪辑路径属性的动画

📅  最后修改于: 2021-08-31 02:23:16             🧑  作者: Mango

clip-path CSS 属性用于以显示被剪切区域中的元素的方式剪切区域。

在本文中，我们将看到如何一起使用剪辑路径和@keyframes 来创建图像动画。

第 1 步：使用应包含 标签的类容器创建一个 div。 



  

    Clip-Path Animation

  

    
Welcome to GFG

  
    
    

        
    


  

第 2 步：包括 CSS 属性 –

  1. 我们将首先将图像裁剪为多边形。
  2. 然后，将动画绑定到 img 标签。
  3. 动画设置为无限循环三秒。
  4. 现在，我们将在 @keyframes 中指定 CSS 样式，这会将剪辑路径属性从一个值更改为另一个值。 


  

    Clip-Path Animation
  
    

  

    
Welcome To GFG

  
    
    

        
    


  

输出：