Die folgenden Attribute sind nicht sehr kompatibel mit Browsern.
1.transform:rotate(45deg)
2.border-top-left-radius Mit diesem Attribut können Sie einem Element einen abgerundeten Rahmen hinzufügen
3.border-radius Mit dieser Eigenschaft können Sie einem Element einen abgerundeten Rand hinzufügen
4.box-shadow-Eigenschaft fügt dem Feld einen oder mehrere Schatten hinzu
5.text-shadow-Eigenschaft legt einen Schatten auf den Text
6. Übergang
Um eine bessere Kompatibilität mit verschiedenen Browsern zu gewährleisten, muss ein Präfix
-o- /*Opera browser*/
-webkit- /*Webkit hinzugefügt werden Kernel-Browser Safari und Chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/
1.transform:rotate(45deg)
Drehen Sie das Objekt durch das Transformationsattribut, wobei (45deg) der Drehwinkel ist
transform:rotate(45deg);
-ms-transform:rotate(45deg); */
-o-transform:rotate(45deg); /*Opera-Browser*/
-webkit-transform:rotate(45deg); /*Webkit-Kernel-Browser Safari und Chrome*/
-moz- transform: rotieren(45deg); /*Firefox*/
2.border-top-left-radius border-radius Mit dieser Eigenschaft können Sie einem Element einen abgerundeten Rand hinzufügen
former Sie können auswählen, wo ein abgerundeter Rand hinzugefügt werden soll
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
border- top-left -radius Mit diesem Attribut können Sie einem Element einen abgerundeten Rand hinzufügen. Es ist dasselbe wie border-radius, Sie können jedoch steuern, wo der abgerundete Rand hinzugefügt werden muss . Das Box-Shadow-Attribut fügt dem Text einen oder mehrere Schatten hinzu ;
Attribut: horizontale Schattenposition||. Ändere den äußeren Schatten (Anfang) in den inneren Schatten: 1px 1px 3px #292929;
Textschatten: h-Schatten ||. Übergang
Eigenschaft ||. Verzögerung
Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt|| |. Gibt die Geschwindigkeitskurve des Geschwindigkeitseffekts an.|| Definiert den Übergangseffekt. Wann gestartet werden soll
Derzeit unterstützen nicht alle Browser das Übergangsattribut.
Standardeinstellung vereinfachen. Die Animation beginnt mit niedriger Geschwindigkeit, beschleunigt dann und verlangsamt sich, bevor sie endet.
Ease-in-Animation beginnt mit niedriger Geschwindigkeit.
Ease-out-Animation endet mit niedriger Geschwindigkeit. Unsere Animation beginnt und endet mit niedriger Geschwindigkeit
transition:background 5s Ease
ONE EG:
Code kopieren
Code wie folgt:
Bitte bewegen Sie den Mauszeiger auf das blaue div-Element, um den Übergangseffekt zu sehen.
Hinweis: Dieses Beispiel funktioniert nicht im Internet Explorer.