CSS和HTML过渡效果

Question

CSS和HTML过渡效果

htmlcsscss-transitionssubclass

3

一个网站在页面右上角有一张图片（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;
    }

- user6272835

问题已经得到解答。 - user6272835

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MattDiMu · Accepted Answer

您正在使用标识作为背景图像，并将其大小设置为元素水平宽度的15%（background-size始终相对于元素而不是相对于使用的背景图像的宽度）。垂直大小设置为自动（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;
}