在 CSS max-width 上执行动画

ID:13156 / 打印

在 css max-width 上执行动画

要使用 CSS 实现 max-width 属性的动画,您可以尝试运行以下代码

示例

现场演示

<!DOCTYPE html> <html>    <head>       <style>          div {             overflow: auto;             background-color: blue;             color: white;             border: 1px solid black;             animation: myanim 3s;          }          @keyframes myanim {             30% {                max-width: 250px;             }          }       </style>    </head>    <body>       <h1>Example of max-width</h1>       <div>          <p>This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.             This is demo text. This is demo text. This is demo text.          </p>       </div>    </body> </html>
上一篇: CSS 中的上下文选择器是什么?
下一篇: Less 中的颜色通道函数有哪些?

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。