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

アニメーションでCSS列のプロパティを変更する

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

例

<!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;
               columns: 70px 6;
            }
         }
      </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>

  1. CSSのtext-justifyプロパティ

    CSSのtext-justifyプロパティは、text-alignプロパティがjustify値に設定されている場合に、テキストの位置揃え方法を設定するために使用されます。プロパティ値は次のとおりです- text-justify: auto|inter-word|inter-character|none|initial|inherit; 例 ここで、CSSでtext-justifyプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-a

  2. CSSの権利プロパティ

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