的CSS文字動畫

-1

我想創造這樣一個標誌（文本）動畫：的CSS文字動畫

我有這個標誌（這是一個文本）：{K} 當用戶打開一個頁面（當光標位於）過渡從{K} --->到{Katartika}。左括號是固定的，右邊的右邊顯示整個單詞。幾秒鐘後，它會返回到{K}。

2015-10-08 Antonino Lattene

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

你可以用CSS轉換來做到這一點。我迅速做了這個，也許它不是最好的解決辦法，但是這是我的第一個想法：

div { 
 
    overflow: hidden; 
 
    *zoom: 1; 
 
} 
 
span, 
 
h1 { 
 
    margin: 0; 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
h1 { 
 
    width: 1.18em; 
 
    overflow: hidden; 
 
    transition: width 0.4s; 
 
} 
 
h1:hover { 
 
    width: 4.24em; 
 
}

<div> 
 
    <h1>{Katarina</h1><span>}</span> 
 
</div> 
 
<p>^ HOVER ME! ^</p>

來源

2015-10-08 15:56:00

的CSS文字動畫

回答

相關問題