HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

使用 CSS min-width 属性执行动画

cssweb developmentfront end technology更新于 2024/11/9 19:56:17

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

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            overflow: auto;
            width: 50%;
            background-color: blue;
            color: white;
            border: 1px solid black;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               min-width: 550px;
            }
         }
      </style>
   </head>
   <body>
      <h1>Example of min-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 margin-top 上执行动画 ❯❮ 上一节:使用 CSS Animation 为 transform-origin 属性添加动画