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