我正在尝试创建类似this的内容,当鼠标悬停在徽标图片上时,徽标图片会弹出我的徽标文字。我可以让文字淡出,但我似乎无法让标识在标题部分反弹。
#logo-bunny {
background: url(../images/logo-bunny.png);
position: absolute;
top: 84px;
}
.RI-logo {
display: block;
position: relative;
margin: 0 auto;
top: 0;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.RI-logo:hover {
transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
-moz-transition: 0.25s;
-webkit-transition: 0.25s;
opacity: 0;
}
.RI-logo:hover ~ #logo-bunny {
top: -20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<a class="navbar-brand RI-logo" href="/">Resonance Inn
<div id="logo-bunny">
</div>
</a>
&#13;
答案 0 :(得分:1)
尝试使用css
animation
#logo-bunny {
background: url(http://lorempixel.com/50/50/animals);
width: 50px;
height: 50px;
position: absolute;
top: 50px;
opacity:0;
}
.RI-logo {
height:100px;
display: block;
position: relative;
margin: 0 auto;
top: 50px;
/*overflow: hidden;*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.RI-logo:hover {
transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
-moz-transition: 0.25s;
-webkit-transition: 0.25s;
color:transparent;
}
.RI-logo:hover > #logo-bunny {
animation: popup 1500ms ease-in-out 0s both;
-moz-animation: popup 1500ms ease-in-out 0s both;
-ms-animation: popup 1500ms ease-in-out 0s both;
-o-animation: popup 1500ms ease-in-out 0s both;
-webkit-animation: popup 1500ms ease-in-out 0s both;
}
@keyframes popup {
0% {
top:50px;
opacity:0;
}
50% {
top:-45px;
}
100% {
top:-10px;
opacity:1;
}
}
@-moz-keyframes popup {
0% {
top:50px;
opacity:0;
}
50% {
top:-45px;
}
100% {
top:-10px;
opacity:1;
}
}
@-o-keyframes popup {
0% {
top:50px;
opacity:0;
}
50% {
top:-45px;
}
100% {
top:-10px;
opacity:1;
}
}
@-webkit-keyframes popup {
0% {
top:50px;
opacity:0;
}
50% {
top:-45px;
}
100% {
top:-10px;
opacity:1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<a class="navbar-brand RI-logo" href="/">Resonance Inn
<div id="logo-bunny">
</div>
</a>