试图创建类似这样的东西。 悬停时的小CSS动画
我不能使用letter-spacing.
我创建了这段代码,但是效果不好。
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
text-align: center;
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
margin-left: 4px;
margin-top: 3px;
text-indent: 8px;
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
-o-transition-property: width, height;
-o-transition-duration: 0.2s, 0.2s;
-o-transition-delay: 0s, 0.2s;
-moz-transition-property: width, height;
-moz-transition-duration: 0.2s, 0.2s;
-moz-transition-delay: 0s, 0.2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 71px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
text-indent: 2px;
}
.logo_wrapper:hover {
text-decoration: none;
}
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
有什么想法?
[这](http://jsfiddle.net/pyqq8wfe/4/)是我能拿出最好的。它在未悬挂状态下手动在“d”和“i”之间引入一个空格,悬停时会将其取消。 – Harry