Animate CSS column-rule-color 屬性


要使用 CSS 對 column-rule-color 屬性實現動畫,可以嘗試執行以下程式碼

示例

即時演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
            column-rule: 10px inset orange;
            column-count: 4;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule color property</h2>
      <div>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!
         This is demo text! This is demo text! This is demo text!
         This is demo text!
      </div>
   </body>
</html>

更新於: 2020 年 6 月 25 日

171 次瀏覽

開啟你的 職業生涯

透過完成教程獲得認證

開始學習
廣告