懸停時的小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的方法與沿'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