CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSアニメーションでcolumn-rule-widthプロパティを変更する

CSSを使用してcolumn-rule-widthプロパティにアニメーションを実装するには、次のコードを実行してみてください

例

<!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;
               column-rule-width: 20px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule width 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>

  1. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  2. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;