0

私は現在、新しいウェブサイトの基礎となるテンプレートを作成しており、アニメーションやその他の「特殊効果」を追加するところまで来ました。テンプレートの基礎として、ボイラープレート h5bp テンプレートを使用しており、ヘッダー要素はインラインブロックで構築されています -

<header>
            <div class="box" id="head-one">
                <h1>Your name here</h1>
                <h2>Click to call <a href="tel:your-phone-number">your-phone</a> or <a href="mailto:you@your-domain.what.where?subject=Message%20subject%20here&body=Some%20text%20to%20add%20to%20the%20message%20body.">Email Us</a></h2>
                <nav>
                    <ul class="menu">
                        <li><a href="index.html">Page 1</a></li>
                        <li><a href="accordion.html">Page 2</a></li>
                        <li><a href="boxs.html">Page 3</a></li>
                        <li><a href="images.html">Page 4</a></li>
                    </ul>
                </nav>
            </div><!-- close class box id head-one
            --><div class="box" id="head-two"><!--
            --><img id="logo-head" src="images/logo.svg" alt="Logo for your web site">
            </div><!-- close class box id head-two -->
        </header>

これは私がCSSの配置を行った方法です（使用されている色は、この段階でボックスのサイズと配置を強調するためだけのものです）-

header
    {
        border: 0.5em solid blue;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        text-align: justify;
        padding: 1em 0.5em 0em 0.5em;
        margin: 5px auto;
    }

nav,
ul.menu,
ul.menu li
    {
        display: inline-block;
    }

#logo-head
    {
        width: 200px;
        height: 200px;
        padding: 0.5em;
    }

div.box#head-two
    {
        width: 100%;
        height: 100%;
        text-align:center;
        display: inline-block;
        animation:logo 5s linear 0.3s 3;
        -webkit-animation:logo 5s linear 0.3s 3;
    }

@keyframes logo
    {
        0%      {transform:rotate(0deg);}
        25%     {transform:rotate(90deg);}
        50%     {transform:rotate(180deg);}
        100%        {transform:rotate(360deg);}
    }

@-webkit-keyframes logo
    {
        0%      {-webkit-transform:rotate(0deg);}
        25%     {-webkit-transform:rotate(90deg);}
        50%     {-webkit-transform:rotate(180deg);}
        100%            {-webkit-transform:rotate(360deg);}
    }

div.box#head-one
    {
        width: 75%;
        text-align: center;
    }

header::after
    {
        content: '';
        width: 100%;
        display: inline-block;
    }

header div.box#head-one::before
    {
        content: '';
        height: 100%;
        width: 100%;
        vertical-align: middle;
    }

ただし、アニメーションは「header div.box#head-two」に含まれるロゴをヘッダー ボックスの右側ではなく下部に押し込みます。アニメーションがなければ、ロゴは垂直方向に適切に配置されます (中央と右側)。残りのヘッダー コンテンツ。

この基本的なアニメーションが私の構造を壊さないようにするにはどうすればよいでしょうか。これは、ページ レイアウトがインライン ブロックの表示値に依存するため、このプロジェクトで解決しなければならない重要な問題です。

4

1 に答える 1

0

アニメーションなしでは右にとどまりません。div.box#head-two幅 100%に設定していて、フローティングしていません。float: leftこれらの 2 つの divに追加してdiv.box#head-two幅を 25% にすると、機能します。

div.box#head-two {
    width: 25%;
    height: 100%;
    text-align:center;
    float:left;
    display: inline-block;
    animation:logo 5s linear 0.3s 3;
    -webkit-animation:logo 5s linear 0.3s 3;
}

div.box#head-one {
    width: 75%;
    float:left;
    text-align: center;
}

http://jsfiddle.net/ydEPG/

于 2013-09-20T00:06:27.217 に答える