在 CSS max-width 上執行動畫

WBOY

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

轉載

846 人瀏覽過

在 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

作者最新文章