Heim >Web-Frontend >Front-End-Fragen und Antworten >Wie viele Übergangseigenschaften gibt es in CSS3?
Wie viele Übergangseigenschaften gibt es in CSS3?
- 青灯夜游Original
- 2021-12-14 17:20:162170Durchsuche
Es gibt 5: 1. Attribut „Übergangseigenschaften“; 3. Attribut „Übergangszeitpunkt“; 5. Attribut „Übergangsverzögerung“;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Der
css3-Übergang ermöglicht es uns, innerhalb einer begrenzten Zeit von einem Attributwert zu einem anderen zu wechseln.
Es gibt 5 Übergangsattribute in CSS3:
| Attribut | Beschreibung | CSS |
|---|---|---|
| Übergang | Abkürzungsattribut, mit dem vier Übergangsattribute in einem Attribut festgelegt werden. | 3 |
| transition-property | Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet. | 3 |
| Übergangsdauer | Definieren Sie, wie lange der Übergangseffekt dauert. Der Standardwert ist 0. | 3 |
| transition-timing-function | gibt den zeitlichen Verlauf des Übergangseffekts an. Der Standardwert ist „einfach“. | 3 |
| transition-delay | Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0. | 3 Es gibt so viele Übergangscodes in div{}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html> | Tatsächlich müssen Sie nur das abgekürzte Übergangsattribut verwenden und zwei Codezeilen verwenden, um es zu erhalten:
)
Das obige ist der detaillierte Inhalt vonWie viele Übergangseigenschaften gibt es in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist ein zusammengesetztes CSS3-Attribut?Nächster Artikel：Was ist ein zusammengesetztes CSS3-Attribut?