Home  >  Article  >  Web Front-end  >  What are the new features of css3

What are the new features of css3

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-23 10:58:2814910browse

The new features of css3 include: 1. "E[att^=value]", "E[att$=value]" and other attribute selectors; 2. ":root", ":not", " :empty" and other pseudo-classes; 3. Box-shadow, transition, transform and other attributes.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 Selector

Attribute Selector

  • ##E[ att^=value]

  • E[att$=value]

  • E[att*=value]

Pseudo-class selector

  • :root


  • :not

  • :only-child

  • :first-child and:last-child

  • :nth -child(n) and:nth-last-child(n)

  • :nth-of-type(n) and:nth-last-of-type(n)

  • :target

  • :empty

##css3 attribute

CSS3 border and rounded corners

    CSS3 rounded corners border-radius
  • box Shadow box-shadow
  • border-image

CSS3 background and gradient

CSS3Background

    background-image: Set the background image of an element.
  • background-origin: Specifies the position relative to which the background-position attribute is positioned.
  • background-clip: Specifies the drawing area of ​​the background.

  • CSS3 Gradient

Definition: A translation transition that can be displayed between two or more specified colors

    linear-gradient(): Linear gradient.
  • radial-gradient(): Radial gradient.

CSS3 Transition

Definition: Allows CSS attribute values ​​​​to transition smoothly within a certain time interval. When the mouse clicks, the mouse Triggered when sliding over or any change to the element, and smoothly animate the CSS property value.

    transition: Set the element as a transition effect. The four abbreviated attributes are:
  • transition-property: Transition property name.
  • transition-duration: Specifies the time (in seconds or milliseconds) it takes to complete the transition effect.
  • transition-timing-function: Specifies the speed of the switching effect.

What are the new features of css3

##cubic-bezier(x1,y1,x2,y2): Bezier curve, is a control Changing speed curve.
  • transition-delay: Specifies when the transition effect will begin.

  • CSS3 Transformation

Definition: Let an element be deformed in a coordinate system. This attribute contains a series of deformation functions, Elements can be moved, rotated, and scaled.

transform: A 2D or 3D transformation applied to the element. This property allows you to rotate, scale, move, tilt, etc. the element.
  • Syntax:
  • transform: none(默认)|transform-functions;

transform-origin: Allows you to change the position of the transformed element. 2D transform elements can change the element's X and Y axes. Transform elements in 3D and also change the Z-axis of the element.
  • Syntax:
  • transform-origin: x-axis y-axis z-axis;

transform-style: Specifies how nested elements are rendered in three-dimensional space.
  • 2D conversion method

rotate(angle): Define 2D rotation and specify the angle in the parameters.
  • translate(x,y): Specify the displacement of the element in two-dimensional space. The X-axis direction is to the right and the Y-axis direction is downward.
  • translateX(n): Specifies the displacement of the element in the X axis.
  • translateY(n): Specify the displacement of the element in the Y axis.
  • scale(n): Defines the 2D scaling transformation.
  • scaleX(n): Define the scaling transformation in the X-axis direction.
  • scaleY(n): Defines the scaling transformation in the Y-axis direction.
  • matrix(a,b,c,d,e,f): Defines a 2D transformation using a matrix of six values.
  • skew(x-angle,y-angle): Defines a 2D skew transformation along the X and Y axes.
  • skewX(angle): Defines the 2D skew transformation along the X-axis.
  • skewY(angle): Defines the 2D skew transformation along the Y axis.
  • 3D Transformation Methods

perspective(n): Defines the perspective view for the 3D transformation element.
  • translate3d(x,y,z): Specify the displacement of the element in three-dimensional space. The X-axis direction is to the right, the Y-axis direction is downward, and the Z-axis direction is toward you.

  • translateX(x): Specifies the displacement of the element in the X axis.
  • translateY(y): Specifies the displacement of the element in the Y axis.
  • 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:定义动画的播放次数。

What are the new features of css3

  • animation-direction:指定是否应该轮流反向播放动画。

What are the new features of css3

  • animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。该属性可重写该行为。

What are the new features of css3

  • animation-play-state:指定动画是否正在运行或已暂停。

What are the new features of css3

  • @Keyframes规则:使用@keyframes规则,你可以创建动画。

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

What are the new features of css3

@keyframes mymove {

0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

推荐学习:css视频教程

The above is the detailed content of What are the new features of css3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:what is css block elementNext article:what is css block element