HTML,CSS (transition, transform, animation)

30550 ワード
animation transform html CSS transition テキストリンク
以前は、ページをより効率的にするためにJavaScriptを使用する必要がありましたが、CSSも方法を提供しています.
今回はこれらの方法についてご紹介します.
transition
≪トランジション|Transition|emdw≫:ある状態から別の状態への移行方法を制御します.
既定の構造はtransition : "변화시킬 속성" "변화할 시간" "변환방식";です.
例を見てみましょう.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a{
            background-color: aqua;
            color: teal;
            font-size: 50px;
            border-radius: 10px;
            text-decoration: none;
        }

        a:hover{
            background-color: teal;
            color: aqua;
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <a href="#">
        Hover Button
    </a>
</body>
</html>

この変換を行わないと、サスペンション状態はa{}状態からa:hover{}状態に有効に変更されます.
次に、移行が適用されているかどうかを見てみましょう.
<style>
  a{
    background-color: aqua;
    color: teal;
    font-size: 50px;
    border-radius: 10px;
    text-decoration: none;
  
    transition: background-color 3s ease-in-out, color 3s ease-in-out;
  }

  a:hover{
    background-color: teal;
    color: aqua;
  }
</style>

この移行により、変化を制御できます.
transitionの特殊な使い方を見てみましょう.
  • transition : all "변화할 시간" "변환방식";を使用して、すべての変更のプロパティを選択できます.
  • transition : "변화시킬 속성" "변화할 시간" "변환방식", "변화시킬 속성" "변화할 시간" "변환방식", ...のようにカンマで接続を続けることができます.

  • 変換はステータスセレクタのない場所で使用する必要があります.
    (たとえば、.a:非サスペンション{}で定義します.a{})
    • "변환방법"(例えばease-in-out)は、定義された方法を使用して、ユーザが自分でスケールを指定することができる.
    このサイトは、様々な変換方法および例を提供する.
    transform
    Transformは、HTML要素の外観、サイズ、位置、角度を変更する属性です.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;
        }
        img:first-child{
            transform: translateX(-100px);
        }
        img:nth-child(2){
            transform: rotate(0.5turn);
        }
        img:nth-child(3){
            transform: scaleY(2);
        }
        img:nth-child(4){
            transform: skew(30deg, 20deg);
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
</body>
</html>

    デフォルトの画像をtranslateに移動します.
    回転、スケール、または傾斜が可能であり、x、y角度を傾斜させることも可能である.
    でもtransformだけ使うとちょっと単調
    transitionを加えるともっと効果的です
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            transition: transform 3s ease-in-out;
        }

        img:hover{
            transform: rotateX(0.5turn) translateX(400px);
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

    tranformはtransitionとともに使用され、良い効果を生み出しました.
    (Rotatexがあんなに回転するとは思わなかったのですが、過程を見て新鮮に感じました…)
    変換効果はいろいろあります.
    こちらです。またはこちらです。.
    animation
    今まではアニメを習っていましたが、アニメの概念がありました.
    どんな違いがありますか.
    遷移を使用して作成される効果は、常に特定の条件下(:hover,:active...)平日のみ運行しています.
    今回学ぶアニメーションは、それを補完し、私たちが好きなように、好きなように実行するのを助けます.
    アニメーションはキーフレームを使用して作成されます.基本構造は次のとおりです.
    @keyframes animation-name{
  from {
    설정 효과;
  }
  to {
    설정 효과;
  }
#또는 0% {} 25% {} 50% {} 75% {} 100% {} 등도 있습니다. 
}

.class{
  animation : animation-name "설정 시간" "변환 효과" "변환 기간"
}
    次に、実際にアニメーションを使用した例を見てみましょう.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            animation : guImg 3s ease-in-out infinite;
        }

        @keyframes guImg {
            0%{
                transform : rotateY(0);
            }
            25% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            50% {
                transform: rotateY(0.5turn) scale(2);
                border-radius: 5%;
            }
            75% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            100% {
                transform: rotateY(0);
            }
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

    [ステータスセレクタ](Status Selector)を使用することなく、アニメーションが正常に動作しているかどうかを確認できます.
    アニメーションを使用する理由と例についても議論した.
    各種のアニメーションの方式のウェブサイトを紹介しますはとても役に立ち、必要に応じて使用できます!
    360携帯電話の衛士が話しています.サービスに最高の権限を与えます.
    キャッシュとしてredisを使用する方法、データへのユーザーアクセスを強化する方法