首頁 > 文章 > web前端 > 在 CSS max-width 上執行動畫

在 CSS max-width 上執行動畫

WBOY轉載: 2023-08-26 20:09:06826瀏覽

在 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。如有侵權，請聯絡admin@php.cn刪除

上一篇：Less 中的顏色通道函數有哪些？下一篇：Less 中的顏色通道函數有哪些？

看更多