亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

So implementieren Sie mehrere CSS-übergangseffekte
P粉258788831
P粉258788831 2023-08-22 11:00:36
0
2
568
<p>Dies ist eine ziemlich einfache Frage, aber ich kann keine gute Dokumentation zu CSS-übergangseigenschaften finden. Hier ist das CSS-Snippet: </p> <pre class="brush:php;toolbar:false;">.nav a { text-transform:uppercase; Textdekoration: keine; Farbe:#d3d3d3; Zeilenh?he:1,5em; Schriftgr??e:.8em; Bildschirmsperre; text-align:center; Textschatten: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: Farbe .2s linear; -moz-transition: Farbe .2s linear; -o-übergang: Farbe .2s linear; übergang: Farbe .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; übergang: text-shadow .2s linear; } .nav a:hover { Farbe:#F7931E; Textschatten: 0 1.5em 0 rgba(247, 147, 30, 0.15); }</pre> <p>Wie Sie sehen, überschreiben sich die übergangseigenschaften gegenseitig. Derzeit wird der Textschatten animiert, die Farbe jedoch nicht. Wie kann ich sie gleichzeitig animieren? Vielen Dank für alle Antworten. </p>
P粉258788831
P粉258788831

Antworte allen(2)
P粉930448030

編輯:我對(duì)是否刪除這篇帖子感到猶豫。就理解CSS語法而言,讓人們知道all的存在是好的,根據(jù)CSS的結(jié)構(gòu),它可能比一百萬個(gè)單獨(dú)的聲明更可取。另一方面,它可能會(huì)有性能損耗,盡管我還沒有看到任何支持這個(gè)假設(shè)的數(shù)據(jù)。暫時(shí)我會(huì)保留它,但我希望人們意識(shí)到這是一種兩面性。

原始帖子:

你也可以簡單地使用以下代碼:

.nav a {
    transition: all .2s;
}

FWIW:如果未指定,all是默認(rèn)的,所以transition: .2s;也可以達(dá)到相同的效果。

P粉055726146

在支持過渡效果的所有瀏覽器中,過渡屬性是用逗號(hào)分隔的:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease 是默認(rèn)的時(shí)間函數(shù),所以你不需要指定它。如果你真的想要 linear,你需要明確指定:

transition: color .2s linear, text-shadow .2s linear;

這開始變得重復(fù)了,所以如果你要在多個(gè)屬性上使用相同的時(shí)間和時(shí)間函數(shù),最好使用各種 transition-* 屬性而不是簡寫形式:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage