悬停时的小CSS动画

Question

试图创造这样的东西。

我不能用letter-spacing. 我创建了这个代码，但它不能很好地工作。

http://jsfiddle.net/pyqq8wfe/

 .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> 

有什么想法吗？

Answer 1

由于你不能使用letter-spacing或分割单词，下面是一个使用border-right和overflow: hidden设置隐藏'd'后面的所有字符。 在悬停时它们被揭示并因此产生效果。

 .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; not required */ position: absolute; font-size: 20px; background-color: red; border-radius: 18px; color: white; /* following properties were added */ padding-left: 5px; box-sizing: border-box; border-right: 5px solid red; overflow: hidden; /* end of addition */ font-weight: normal; line-height: 1; transition-property: width, height; transition-duration: 0.2s, 0.2s; transition-delay: 0s, 0.2s; } .refreshed_logo:hover:after { width: 65px; transition: width 0.5s; } .logo_wrapper:hover { text-decoration: none; } 

 <a href="/" class="logo_wrapper"> <span class="refreshed_logo"> Granat </span> </a> 

Answer 2

我试着得到相同的结果，或许更好：

最后编辑：隐藏其他字母我使用相同颜色的背景，只更改第一个字母颜色。

CSS：

.titre{
    font-size:20pt;
}

.sstitre{
    font-size:10pt;
    font-weight:bold;
    color:red;
    background-color:red;
    border-radius:10px;
    padding-left:4px;
    padding-right:2px;
    width:10px;
    position: absolute;
    overflow:hidden;
    transition:width 0.5s;
}

.sstitre::first-letter{
    color:white;
}

.titre:hover .sstitre{
 width:40px;   
color:white;
}

HTML

<span class="titre">Granat<span class="sstitre">digital</span></span>

JSFidle