css3의 새로운 기능은 다음과 같습니다: 1. "E[att^=value]" 및 "E[att$=value]"와 같은 속성 선택기 2. ":root", ":not", ":empty " 등 의사 클래스; 3. 상자 그림자, 전환, 변환 및 기타 속성.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS3 선택기
속성 선택기
E[att^=값]
E[att$=값]
E[att*=값]
의사 클래스 선택기
:root
:not
:only-child
:first-child 및:last-child
:n번째 -자식( n) 및:nth-last-child(n)
:nth-of-type(n) 및 :nth-last-of-type(n)
:target
CSS3 배경 및 그라데이션
CSS3 background
정의: 둘 이상의 지정된 색상 사이에 표시될 수 있는 변환 전환
linear-gradient(): 선형 그래디언트.
cubic-bezier(x1,y1,x2,y2): 베지어 곡선은 변화를 제어하는 속도 곡선입니다.
transition-delay: 전환 효과가 시작되는 시기를 지정합니다.
transform: 요소에 적용되는 2D 또는 3D 변환입니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 기울이기 등을 할 수 있습니다.
transform: none(默认)|transform-functions;
transform-origin: x-axis y-axis z-axis;
transform-style: 중첩된 요소가 3차원 공간에서 렌더링되는 방식을 지정합니다.
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:定义动画的播放次数。
animation-direction:指定是否应该轮流反向播放动画。
animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。该属性可重写该行为。
animation-play-state:指定动画是否正在运行或已暂停。
@Keyframes规则:使用@keyframes规则,你可以创建动画。
语法:
@keyframes animationname {keyframes-selector {css-styles;}}
@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视频教程
위 내용은 CSS3의 새로운 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!