在 CSS min-width 上執行動畫


如需在 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>

上次更新:2020 年 6 月 25 日

204 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告