0

我目前正在构建一个模板，它将成为我新网站的基础，并且已经达到添加动画和其他“特殊效果”的地步。作为我的模板的基础，我使用的是 Boilerplate 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”中包含的徽标推到标题框的底部，而不是在右侧向上，没有动画，徽标很好地垂直对齐 - 中间和右侧标题内容的其余部分。

如何阻止这个基本动画破坏我的结构，这是我在这个项目中要解决的一个重要问题，因为页面布局取决于 inline-block 显示值。

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 回答