下面是一个div中的span代码:
<div class="mission-button"><span class="mission">view our mission</span></div>
字符串
下面是CSS:
.mission-button::before {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
border-left-width: 2px;
border-right-width: 2px;
border-left-style: solid;
border-right-style: solid;
background-color: transparent;
border-color: var(--main-dark);
animation: borderOnLoad 2s forwards;
}
@keyframes changeColor {
0% {
letter-spacing: 0px;
color: white;
}
100% {
letter-spacing: 2px;
color: var(--main-dark);
}
}
@keyframes borderOnLoad {
0% {
width: 100%;
border-left-width: 3px;
border-right-width: 3px;
height: 100%;
top: 0;
color: white;
background-color: var(--main-dark);
}
50% {
width: 200%;
left: -150px;
border-left-width: 3px;
border-right-width: 3px;
height: 100%;
top: 0;
color: white;
}
100% {
width: 65%;
left: -150px;
border-left-width: 200px;
border-right-width: 200px;
height: 1px;
top: 30px;
color: var(--main-dark);
background-color: transparent;
}
}
.mission-button {
padding: 20px;
/* background-color: #083958;*/
cursor: pointer;
width: 50%;
position: relative;
margin-top: 20px;
font-size: 20px;
text-align: center;
}
.mission {
letter-spacing: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
animation: changeColor 2s forwards;
}
.mission-button:hover .mission {
letter-spacing: 5px;
}
.mission-button:hover::before {
width: 32%;
border-left-width: 200px;
border-right-width: 200px;
height: 1px;
top: 30px;
}
型
changeColor和borderOnLoad动画按预期工作,但当我悬停div时,我希望span通过以下方式更改其字母间距:
.mission {
letter-spacing: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
animation: changeColor 2s forwards;
}
.mission-button:hover .mission {
letter-spacing: 5px;
}
型
但它做任何事情。我想这是因为已经有一个动画的任务按钮,这是优先于其余的,但我不知道
1条答案
按热度按时间ncecgwcz1#
这是因为您将
animation-fill-mode
设置为forwards
,这将保持最后一个关键帧的样式,包括line-spacing:2px
。将最后一个关键帧的原始2px行距移动到.mission
可能更有意义:字符串
如果无法更改原始间距,则可以使用
!important
来覆盖它:型
或者将文本 Package 在另一个容器中,并在该容器上指定样式:
型