CSS and HTML Transition

Question

一个网站在网站的右上角有一个图像（logo.png），旁边是一系列单词。

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

但是，当我将单词序列更改为单词少于默认值的单词序列时，徽标的大小会缩小。

我已经浏览了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

您使用徽标作为背景图像，并将其大小设置为元素水平宽度的15%（background-size始终相对于元素，而不是相对于使用的背景图像的宽度）。垂直大小被设置为auto（background-size: 15%相当于background-size: 15% auto），因此将随着元素的宽度而缩放。

因此，如果减小元素的宽度，背景图像的大小（水平和垂直）将适应。

如果将徽标作为背景图像的元素设置为固定宽度，则背景图像不会调整大小。您可以通过以下方式实现这一点，例如

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