PHP前端开发

在 CSS max-width 上执行动画

百变鹏仔 3个月前 (09-20) #CSS

文章标签动画

要使用 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>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客