PHP前端开发

动画 CSS flex-grow 属性

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

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

示例 h2>

现场演示

<!DOCTYPE html><html>   <head>      <style>         .mycontainer {            display: flex;            background-color: red;            align-content: space-between;         }         .mycontainer > div {            background-color: white;            text-align: center;            line-height: 40px;            font-size: 25px;            width: 100px;            margin: 5px;         }         div {            animation: myanim 4s infinite;         }         @-webkit-keyframes myanim {            30% {               flex-grow: 3;            }         }      </style>   </head>   <body>      <h1>Quiz</h1>      <div class = "mycontainer">         <div style = "flex-grow: 1">A1</div>         <div style = "flex-grow: 1">A2</div>         <div style = "flex-grow: 20">A3</div>         <div style = "flex-grow: 1">A4</div>         <div style = "flex-grow: 1">A5</div>      </div>   </body></html>