Der Inhalt dieses Artikels befasst sich mit der Frage, was ein CSS-Übergang ist. Eine kurze Einführung in Übergangselemente in CSS hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.
CSS-Übergang: Die Wirkung von Elementen, die sich allmählich von einem Stil zum anderen ändern.
Erforderliche Bedingungen für den Übergang:
1. Das zu übertragende Element muss einen CSS-Stil haben.
2. Es muss Übergangszeit geben.
Das Folgende sind die Attribute des Übergangselements:
Übergang: Kurzschriftattribut, das zum Festlegen von vier Übergangsattributen in einem Attribut verwendet wird.
transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet.
Übergangsdauer: die für den Übergang benötigte Zeit.
Übergangszeitfunktion: Die Zeitkurve des Übergangselements. Die Attributwerte sind linear (ein Prozess mit gleichmäßiger Geschwindigkeit), Leichtigkeit (ein Prozess mit allmählicher Verlangsamung) und Leichtigkeit (ein Prozess der Beschleunigung), Ease-Out (der Prozess der Verzögerung), Kubik-Bezier (0,0,0,0) Bezier-Kurve
Übergangsverzögerung: Geben Sie die Startzeit eines Übergangs an (das ist, wie lange es dauern wird, bis die Ausführung beginnt), der Standardwert ist 0
Wir verwenden normalerweise den Übergangseffekt, nachdem die Maus darüber gleitet oder klickt:
1. Die Breite ändert sich auf 120 % des Originals, nachdem die Maus darüber gleitet
2. Fügen Sie Schatten hinzu, wenn die Maus darüber gleitet
3 und andere Effekte, wenn die Maus darüber gleitet.
Transformation (2D-Konvertierung)
Zu den Attributwerten gehören: Verschieben (Übersetzung), Drehen (Rotation), Skalieren (Zoom), Skew (Verzerrung)
HTML-Teil
<body> <div id="box"> </div> </body>
CSS-Teil:
#box{ height: 200px; width: 200px; border:1px solid #000; /*1.鼠标滑过宽度变为原来的120%*/ transition-property: width; /*所要过渡的属性名称*/ transition-duration: 1s;/*过渡的时间*/ transition-timing-function: linear;/*过渡的时间曲线*/ transition-delay: 0;/*过渡的开始时间*/ /*2.鼠标滑过加上阴影*/ transition-property: box-shadow; /*所要过渡的属性名称*/ transition-duration: 1s;/*过渡的时间*/ transition-timing-function: linear;/*过渡的时间曲线*/ transition-delay: 0;/*过渡的开始时间*/ /*以上写法比较麻烦所以可以简写成:*/ transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/ -ms-transition: all 1s linear 0s;/*兼容IE10+*/ -moz-transform: all 1s linear 0s;/*兼容 Firefox */ -o-transition: all 1s linear 0s;/* 兼容Opera */ -webkit-transform: all 1s linear 0s;/* 兼容Safari and Chrome */; } /*transform(2D转换) 属性值有:translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/ #box:hover{ width: 120%; box-shadow: 0px 0px 5px orange; /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/ /*1.平移*/ transform: translate(50px,50px); /*translate() 如果一个值表示x轴需要平移的距离,两个值则表示x、y轴需要平移的距离*/ -webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */; -ms-transform: translate(50px,50px);/*兼容IE10+*/ -moz-transform: translate(50px,50px);/*兼容 Firefox */ -o-transform: translate(50px,50px);/* 兼容Opera */ /*只让x轴平移*/ transform: translateX(50px); -webkit-transform: translateX(50px);/* 兼容Safari and Chrome */; -ms-transform: translateX(50px);/*兼容IE10+*/ -moz-transform: translateX(50px);/*兼容 Firefox */ -o-transform: translateX(50px);/* 兼容Opera */ /*只让y轴平移*/ transform: translateY(50px); -webkit-transform: translateY(50px);/* 兼容Safari and Chrome */; -ms-transform: translateY(50px);/*兼容IE10+*/ -moz-transform: translateY(50px);/*兼容 Firefox */ -o-transform: translateY(50px);/* 兼容Opera */ /*2.旋转*//*兼容性同 平移*/ transform:rotate(45deg); /*正值表示顺时针旋转,负值表示逆时针旋转*/ /*只让x轴旋转*/ transform:rotateX(45deg); /*只让y轴旋转,相当一3D旋转*/ transform:rotateY(45deg); /*3.缩放*//*兼容性同 平移*/ transform:scale(0,0.2); /*两个值,第一个表示水平缩放,第二个表示竖直缩放*/ /*4.扭曲*//*兼容性同 平移*/ transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。*/ }
Verwandte Empfehlungen:
Ausführliche Erklärung der Animationseigenschaften von CSS3 (mit Code)
Wie kann man mit reinem CSS-Code einen blinkenden Textanzeigeeffekt erzielen? (Codebeispiel)
So verwenden Sie CSS und D3, um eine Zykloiden-Swing-Effekt-Animation zu erzielen
Das obige ist der detaillierte Inhalt vonWas ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!