CSS 3:transitionインスタンス

9692 ワード
css css 3 実例 トランジスト

きほんりろん

  • transitionには5つのプロパティがあります.
  • property:属性、どのCSS属性を指定して移行することができて、allのすべての属性を使って
    • 有効にすることができます
  • duration:持続時間
  • timing-function:遷移関数、linear(均一速度)、ease-in(漸現)、ease-out(漸隠)、ease-in-out(漸顕漸隠)などがあります.
  • delay:遅延です.実行開始前の待機時間
    • です.
  • 総合書き方:transition: <property> <duration> <timing-function> <delay>
    • 直接例を挙げると、コードは自分でhtmlを作成して保存し、chromeの下またはchromiumカーネルブラウザでプレビューすればいいです.の义齿

    LiveDemo


    コードブロック

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>transition Demo</title>
        <style> /* transition: <property> <duration> <timing-function> <delay>;*/ .demobox { position: relative; left: 25%; top:300px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #56A892; -webkit-transition: all 1s ease-in-out .5s; transition: all 1s ease-in-out .5s; } .demobox:hover { background-color: #fcc; width: 200px; height: 200px; border-radius: 10px; background-color: #2AA2E6; -webkit-transform: rotate(180deg) skew(-5deg,150deg) scale(.5); -ms-transform: rotate(180deg) skew(-5deg,150deg) scale(.5); transform: rotate(180deg) skew(-5deg,150deg) scale(.5); } .btn{ width:200px; height:50px; box-shadow: 2px 2px 2px rgba(38,55,64,.9); -webkit-transition: all 2s ease-in-out ; transition: all 2s ease-in-out ; } .btn:hover{ color:#F5F5F5; font-size:bolder; background: linear-gradient(-45deg, #36C783, #2A9DC8 ); box-shadow: 2px 2px 5px #ABABB4 inset; -webkit-transform: translateX(250px) translateY(100px) rotate(45deg); -ms-transform: translateX(250px) translateY(100px) rotate(45deg); transform: translateX(250px) translateY(100px) rotate(45deg); } </style>
    </head>
    <body>
        <p>              .hover  </p>
        <div class="demobox"></div>

        <button type="button" class="btn">       </button>
    </body>
</html>
    ASP.NETのGridViewの美化作業
    ASP.NET Core構成認証