有人可以請給我解釋這個CSS代碼

嗨，我是新來的CSS和我碰到這個文字下劃線動畫，我不明白它是如何工作的。如果我只是從這些代碼中拿出一些東西，它就會停止工作。提前致謝！有人可以請給我解釋這個CSS代碼

body { 
 
    background-color: black; 
 
} 
 
body a { 
 
    font-weight: 200; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    position: relative; 
 
    color: #fff; 
 
} 
 
body a:visited { 
 
    color: white; 
 
} 
 
body a:hover { 
 
    color: white; 
 
} 
 
body a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 0%; 
 
    border-bottom: 2px solid #fff; 
 
    transition: 0.4s; 
 
} 
 
body a:hover:after { 
 
    width: 100%; 
 
}

<body> 
 
<a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a> 
 
</body>

來源

2017-04-26 G. Rami

什麼是真正重要的是這裏的僞元素「：後」和「：之前」（雖然這最後一個未出現在這裏）。

這裏這部分是什麼使得它來的生活：

body a:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0%; 
    border-bottom: 2px solid #fff; 
    transition: 0.4s; 
}

你看，基本上你正在尋找一個元素的僞元素屬性的聲明。（你可能想挖掘一下CSS-CSS3）。

它指出，在作爲主體的子元素的錨點上觸發懸停事件後，其僞元素將具有2像素寬度的底部邊界，具有白色純色和0.4秒的過渡。

我們可以通過其他聲明來判斷僞元素在初始狀態下的寬度爲0％，在懸停後它會轉換爲100％（如從示例中所示，從左到右））。

在這個CSS代碼中有很多事情需要考慮，但你應該真正學習基礎知識！

來源

2017-04-26 21:50:31

我看，但什麼內容，位置，底部和左側什麼呢這些屬性與動畫做的，如果你把任何動畫甚至不會出現！ –

此行創建動畫： transition：0.4s;

你會注意到body：hover：規則後的寬度爲100％。那麼，該轉換屬性會告訴渲染引擎，在正常和懸停狀態之間的值發生變化的任何屬性上都會執行動畫。

當您懸停時，呈現引擎會讀取您想要將寬度屬性設置爲100％。懸停前，它被設置爲0％。 Transition說：「好吧，懸停時，在4秒的十分之一週期內將寬度屬性從0增加到100％。

對於懸停和非懸停狀態之間的任何屬性，這都是正確的。換言之，可以在一個時間進行，只要在兩種狀態定義與不同值的相同屬性動畫多個屬性。

來源

2017-04-26 21:52:04 Korgrue

一種:after僞CSS意味着另一個「虛擬」元素被選定的元件

後所附

所附上的a:after僞元件與底部border一個簡單的元素，但是沒有寬度（0%）

的transition屬性，元素意味着，改變時，將動畫

使單元的所有屬性...

當你將鼠標懸停在元素（ body a:hover:after說明）

- 寬度認爲「虛擬」的元素被設置爲100％ - 與動漫發生地

來源

2017-04-26 21:55:30 levi

有人可以請給我解釋這個CSS代碼

回答

相關問題