html
  • css
  • animation
  • 2016-08-05 7 views -2 likes 
    -2

    これが私の基本的なHTML構造である:私は私のfadeInDownのdiv要素は、一種のそれのように見えるしたいコンテンツの上からフェードインする中心divを追加するにはどうすればよいですか?

    <body> 
        <div class="fadeInDown"> 
         I want this to appear centered, from the top and over all my content 
        </div> 
    
        <div id='content'> 
         ...much complex html layout...bootstrap...wow 
        </div> 
    </body> 
    

    https://fabriceleven.com/dev/quickly-add-css-fade-in-animations/(例を「下る」)私はdiv要素を中央に達成するにはどうすればよい

    他のすべての上に?

    +1

    が含まれていることをリンクでこれを実現する方法を示します。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

    +0

    私はこれを投稿する前に多くのことを試しました... @Paulie_Dに感謝します:( – ibiza

    +0

    ...あなたは何を試しましたか?私たちは読者ではありません。あなたの研究*を表示する必要がありますので、 –

    答えて

    1

    それはあなたがあなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されている

    .on-top { 
     
        position: absolute; 
     
        width: 100%; 
     
        text-align: center; 
     
    } 
     
    .animate { 
     
        -webkit-animation-duration: 1s; 
     
        animation-duration: 1s; 
     
        -webkit-animation-fill-mode: both; 
     
        animation-fill-mode: both; 
     
    } 
     
    @-webkit-keyframes fadeInDown { 
     
        from { 
     
        opacity: 0; 
     
        -webkit-transform: translate3d(0, -100%, 0); 
     
        transform: translate3d(0, -100%, 0); 
     
        } 
     
        to { 
     
        opacity: 1; 
     
        -webkit-transform: none; 
     
        transform: none; 
     
        } 
     
    } 
     
    @keyframes fadeInDown { 
     
        from { 
     
        opacity: 0; 
     
        -webkit-transform: translate3d(0, -100%, 0); 
     
        transform: translate3d(0, -100%, 0); 
     
        } 
     
        to { 
     
        opacity: 1; 
     
        -webkit-transform: none; 
     
        transform: none; 
     
        } 
     
    } 
     
    .fadeInDown { 
     
        -webkit-animation-name: fadeInDown; 
     
        animation-name: fadeInDown; 
     
    }
    <body> 
     
        <div class="on-top animate fadeInDown"> 
     
        I want this to appear centered, from the top and over all my content 
     
        </div> 
     
    
     
        <div id='content'> 
     
        ...much complex html layout...bootstrap...wow 
     
        </div> 
     
    </body>

    +0

    ありがとうございますが、キャンバス上でフェードアウトのdivがまだ発生していますが、 – ibiza

    +0

    @ibizaのアップデート –

    +0

    を参照してください。ポジションの事> _ < – ibiza

    関連する問題