在 CSS max-width 上执行动画

WBOY

发布： 2023-08-26 20:09:06

转载

828 人浏览过

在 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 max-width 上执行动画的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：tutorialspoint.com

上一篇：Less 中的颜色通道函数有哪些？下一篇：CSS 中的上下文选择器是什么？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章