Was sind die neuen Funktionen von CSS3?-Front-End-Fragen und Antworten-php.cn

Zu den neuen Funktionen von CSS3 gehören: 1. Attributselektoren wie „E[att^=value]“ und „E[att$=value]“ 2. „:root“, „:not“, „:empty " usw. Pseudoklasse; 3. Box-Shadow, Übergang, Transformation und andere Attribute.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3-Selektor

Attribute-Selektor

E[att^=value]
E[att$=value]
E[att*=value]

Pseudoklassenselektor

:root
:not
:only-child
:first-child und:last-child
.
:n-tes -Kind( n) und:nth-last-child(n)
:nth-of-type(n) und :nth-last-of-type(n)
:target
;

CSS3-Hintergrund und Farbverlauf

CSS3-Hintergrund

background-image: Legen Sie das Hintergrundbild eines Elements fest.
background-origin: Gibt die Position an, relativ zu der das Attribut „background-position“ positioniert wird.
background-clip: Gibt den Zeichenbereich des Hintergrunds an.

CSS3-Gradient

Definition: Kann einen translatorischen Übergang zwischen zwei oder mehr angegebenen Farben anzeigen

linear-gradient(): linearer Gradient.

radial-gradient(): radialer Gradient.
CSS3-Übergang

Definition: Ermöglicht den reibungslosen Übergang von CSS-Attributwerten in einem bestimmten Zeitintervall, wird ausgelöst, wenn die Maus klickt, die Maus darüber fährt oder sich das Element ändert, und Ändert das CSS reibungslos in Form eines Animationsattributwerts.

Übergang: Legen Sie das Element als Übergangseffekt fest. Die vier abgekürzten Attribute sind:

transition-property: Name des Übergangsattributs.
Übergangsdauer: Gibt die Zeit (in Sekunden oder Millisekunden) an, die benötigt wird, um den Übergangseffekt abzuschließen.

cubic-bezier(x1,y1,x2,y2): Die Bezier-Kurve ist eine Geschwindigkeitskurve, die Änderungen steuert.
Übergangsverzögerung: Geben Sie an, wann der Übergangseffekt beginnt.
Definition: Lassen Sie ein Element in einem Koordinatensystem verformen. Dieses Attribut enthält eine Reihe von Verformungsfunktionen, die das Element verschieben, drehen und skalieren können.

Was sind die neuen Funktionen von CSS3? Transformation: Auf das Element angewendete 2D- oder 3D-Transformation. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.

Syntax:

transform: none（默认)|transform-functions;

Nach dem Login kopieren

transform-origin: Ermöglicht Ihnen, die Position des transformierten Elements zu ändern. 2D-Transformationselemente können die X- und Y-Achse des Elements ändern. Transformieren Sie Elemente in 3D und ändern Sie auch die Z-Achse des Elements.

transform-origin: x-axis y-axis z-axis;

Nach dem Login kopieren

transform-style: Geben Sie an, wie verschachtelte Elemente im dreidimensionalen Raum gerendert werden.

translateX(x): Gibt die Verschiebung des Elements in der X-Achse an.
translateY(y): Geben Sie die Verschiebung des Elements auf der Y-Achse an.
translateZ(z)：指定元素在Z轴中的位移。
scale3d(x,y,z)：定义 3D 缩放转换。
scaleX(x)：通过设置 X 轴的值来定义缩放转换。
scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。
rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(x)：定义沿着 X 轴的 3D 旋转。
rotateY(y)：定义沿着 Y 轴的 3D 旋转。
rotateZ(z)：定义沿着 Z 轴的 3D 旋转。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

CSS3动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果。

animation：为元素添加动画，是一个简写属性。
animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期。
animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
animation-iteration-count：定义动画的播放次数。