PHP前端开发

对 CSS 剪辑属性执行动画

百变鹏仔 3个月前 (09-20) #CSS
文章标签 剪辑

要使用CSS在clip属性上实现动画,您可以尝试运行以下代码

示例

现场演示

<!DOCTYPE html><html>   <head>      <style>         div {            width: 200px;            height: 300px;            background: yellow;            border: 10px solid red;            animation: myanim 3s infinite;            bottom: 30px;            position: absolute;            clip: rect(0,100px,50px,0);         }         @keyframes myanim {            20% {               bottom: 100px;               clip: rect(0,150px,40px,0);            }         }      </style>   </head>   <body>      <h2>Performing Animation on clip property</h2>      <div></div>   </body></html>