Question

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

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

Answer 1

没有动画，它不适合我。您将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/

内联块内的css动画

1 个答案: