PHP前端开发

使用 CSS 为 border-left 属性设置动画

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

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

示例

现场演示

<!DOCTYPE html><html>   <head>      <style>         div {            width: 500px;            height: 300px;            background: yellow;            border: 10px solid yellow;            border-bottom-right-radius: 100px;            border-bottom-width: 30px;            background-image: url(&#39;https://www.tutorialspoint.com/latest/testrail.png&#39;);            animation: myanim 3s infinite;            background-position: bottom left;            background-size: 50px;         }         @keyframes myanim {            40% {               background-color: maroon;               background-size: 90px;               border-bottom-color: green;               border-bottom-right-radius: 50px;               border-bottom-width: 50px;               border-color: red;               border-left: 10px dashed orange;            }         }      </style>   </head>   <body>      <h2>Performing Animation for left border</h2>      <div></div>   </body></html>