html - CSS 和 HTML 过渡

Question

网站的右上角有一张图片 (logo.png)，旁边是一系列单词。

当鼠标悬停在 Logo 和单词序列上时，单词会旋转并变为白色。

但是，当我将单词序列更改为比默认单词更少的单词时， Logo 会缩小。

我查看了 CSS3 和 HTML5 文件，但未能解决这个问题。

这是 html:

    <div class="navbar-header logo">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <h1>
                                <a class="navbar-brand link link--yaku" href="index.html"><span>C</span><span>O</span><span>N</span><span>S</span><span>O</span><span>R</span><span>T</span><span>I</span><span>U</span><span>M</span></a>
                            </h1>

                        </div>

这是 CSS3 代码:

.logo a{
text-decoration:none;
}
.logo .link {
    outline: none;
    text-decoration: none;
    position: relative;
    font-size: 8em;
    line-height: 1;
    color: #fff;
    display: inline-block;
}
    .logo .link--yaku {
        color: #fff;
        font-weight: 600;
        font-size: 38px;
        overflow: hidden;
        padding: 12px 0 12px 50px;
        background: url(../images/logo.png) no-repeat 0px 18px;
        background-size: 15% !important;
    }
    .logo .link--yaku::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        -webkit-transform: translate3d(-101%,0,0);
        transform: translate3d(-101%,0,0);
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }
    .logo .link--yaku:hover::before {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .logo .link--yaku span {
        display: inline-block;
        position: relative;
        -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
        transform: perspective(1000px) rotate3d(0,1,0,0deg);
        -webkit-transition: -webkit-transform 0.5s, color 0.5s;
        transition: transform 0.5s, color 0.5s;
    }
    .logo .link--yaku:hover span {
        color: #fff;
        -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
        transform: perspective(1000px) rotate3d(0,1,0,360deg);
    }
    .logo .link--yaku span:nth-child(4),
    .logo .link--yaku:hover span:first-child {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    .logo .link--yaku span:nth-child(3),
    .logo .link--yaku:hover span:nth-child(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }
    .logo .link--yaku span:nth-child(2),
    .logo .link--yaku:hover span:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .logo .link--yaku span:first-child,
    .logo .link--yaku:hover span:nth-child(4) {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

Answer 1

您将 Logo 用作背景图像并将其大小设置为元素水平宽度的 15%(background-size 始终相对于元素，而不是相对于所使用的背景图像的宽度)。垂直大小设置为自动(background-size: 15% 等同于 background-size: 15% auto)，因此将随元素的宽度缩放。

因此，如果元素的宽度减小，背景图像的大小(水平和垂直)将会调整。

如果您将 Logo 作为背景图像的元素设置为固定宽度，则背景图像不会调整大小。你可以做到这一点，例如通过

.logo .link--yaku {
  display: inline-block; //it's currently an inline element and would otherwise ignore the width property
  width: 316px;
}