CSS3의 새로운 기능에 대한 자세한 설명

Y2J
풀어 주다: 2017-05-20 11:45:05
원래의
1526명이 탐색했습니다.

animation IE10

애니메이션의 6가지 속성

animation-name은 선택기가 바인딩되어야 하는 키프레임 이름을 지정합니다.

animation-duration은 애니메이션이 실행되는 시간을 지정합니다. 애니메이션을 완료하는 데 소요되는 시간 ms
object.style.animationDuration="3s"

애니메이션-타이밍 기능 애니메이션 속도 곡선
기본값 완화
object.style.animationTimingFunction="linear "
구문 animation-timing-function: value

animation-timing-function은 Cubic Bezier Bezier 곡선 함수라는 수학 함수를 사용하여 속도 곡선을 생성합니다. 고유한 값을 사용하거나
을 사용하여 정의된 값

값: 처음부터 끝까지 같은 속도로 선형
ease 기본 속도는 낮은 속도에서 시작하여 끝나기 전에 느려집니다.
ease-in 애니메이션은 낮은 속도에서 시작됩니다. 🎜>저속에서 Ease-Out 애니메이션 End
Ease-in-Out 애니메이션은 저속에서 시작하여 끝납니다
cubic-bezier(n,n,n,n)는 큐빅-베지어 함수에서 고유한 값을 갖습니다. 가능한 값은 0에서 1까지의 숫자 값입니다

animation-deplay 애니메이션 시작 전 지연

animation-delay:
time;
JavaScript 구문 :object.style.animationDelay="2s"animation-delay 값은 초 또는 밀리초 단위입니다.
음수 값도 허용됩니다. -2s를 사용하면 애니메이션이 즉시 시작되지만 2초를 건너뛰고 애니메이션에 들어갑니다

animation-iteration-

count애니메이션이 실행되는 횟수 IE10animation-iteration- count: n|infinite
JavaScript 구문: object.style.animationIterationCount=3

animation-

direction애니메이션을 역방향으로 재생할지 여부 차례로animation-direction 값이 "alternate"이면 애니메이션은 홀수(1, 3, 5 등)에서는 정상적으로 재생되고 짝수(2, 4, 6 등)에서는 뒤로 재생됩니다.
)
animation-direction: Normal|alternate;
JavaScript 구문: object.style.animationDirection="alternate"

기본값 없음 0 완화 0 1 일반
Javascript 구문 object.style.animation="mymove 5s 무한"

전환 IE10 전환의 네 가지 속성

transition-property

transiont-property 속성은 전환 CSS의 이름을 지정합니다. property
transition-property: 없음|
모두 |propertyCSS 속성 이름 목록(쉼표로 구분);JavaScript 구문: object.style.transitionProperty="
width,height"

transition-duration
전환 효과transition-duration: time;
JavaScript를 완료하는 데 몇 초 또는 밀리초가 소요됩니까? 구문: object.style.transitionDuration="5s"

전환 타이밍 기능: 선형|ease|ease-in|ease-out|ease-in-out|cubic-
베지어 (n,n,n,n);
JavaScript 구문: object.style.transitionTimingFunction="linear"

transition-delay
JavaScript 구문: object.style.transitionDelay=" 2s"
전환-지연: 시간;

기본값 모두 0 완화 0

전환:속성 기간 타이밍-함수 지연

자바스크립트 구문: object.style. Transition="width 2s"

transform IE10

transform을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.
기본값 없음
javascript 구문 객체 .style.transform="rotate(7deg)"
transform: none|transform-functions;

none은 변환하지 않습니다

matrix(n,n,n,n,n,n)는 다음을 사용합니다. 6개 값의 행렬
16개 값의 4x4 행렬을 사용하는 matrix3d(n,n,n, n,n,n,n,n,n,n,n,n,n,n,n,n)
translate(x,y)2D 변환
translate3d(x ,y,z)3D 변환
translateX(x)는 X축의 값만 사용
translateY(y)는 X축의 값만 사용 Y 축
translateZ(z)는 Z 축의 값을 사용합니다
scale (x,y)2D scale
scale3d(x,y,z)3D scale
scaleX(x),scaleY (y),scaleZ(z)
rotate(angle) 2D 회전, 매개변수에서 각도 지정
rotate3d(x,y,z,angle)3D 회전
rotateX(angle),rotateY(angle), RotateZ(angle)
skew(x-angle,y-angle) X 및 Y축의 2D 기울이기 변환을 따라 정의
skewX(angle)skewY(angle)spective(n)

새로운 css3 선택기

1 E:nth-last-child(n)  
2 E:nth-of-type(n)  
3 E:nth-last-of-type(n)  
4 E:last-child  
5 E:first-of-type  
6 E:only-child  
7 E:only-of-type  
8 E:empty  
9 E:checked 
10 E:enabled 
11 E:disabled 
12 E::selection 
13 E:not(s)
14 E::not(.s)
15 body: nth-child(even), nth-child(odd)/*:此处他们分别代表了表格(tbody)下面的偶数行和奇数行(tr)*/等等......
로그인 후 복사

@ Font-face 기능

Font-face는 글꼴 스타일을 로드하는 데 사용할 수 있으며 서버 측 글꼴 파일도 로드할 수 있어 클라이언트가 글꼴을 표시할 수 있습니다.
클라이언트에 없는설치

글꼴-페이스 클라이언트 글꼴 케이스


<p><font face="arial">arial courier verdana</font></p>
로그인 후 복사

글꼴-서버 글꼴 케이스


1 @font-face { 
 2 font-family: BorderWeb; 
 3 src:url(BORDERW0.eot); 
 4 } 
 5 @font-face { 
 6 font-family: Runic; 
 7 src:url(RUNICMT0.eot); 
 8 } 9 10 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
11 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
로그인 후 복사

Word-wrap

설정 또는 현재 줄이 지정된 컨테이너의 경계를 초과할 때 끊어지고 변경되었는지 검색합니다. 이때 텍스트가 끊어졌습니다.

Text-overflow它与 word-wrap 是协同工作
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行,而 text-overflow 则设置或检索当当前行超过指定容
器的边界时如何显示

1 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
2 width:200px;background:#ccc;} 
3 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
4 width:200px; background:#ccc;}
로그인 후 복사

1

不显示省略标记,而是简单的裁切条

2 3

对象内文本溢出时显示省略标记


文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }
로그인 후 복사
로그인 후 복사

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }
로그인 후 복사
로그인 후 복사

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

gradient 渐变效果
线性渐变 linear左上(0% 0%)到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));


径向渐变radial从一个圆到一个圆的渐变
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

css3的阴影shadow和反射reflect

background-clip:border-box;背景从border开始显示;
background-clip:padding-box
background-clip:content-box
background-clip:no-clip:no-clicp默认属性等同于border-box

background-origin 用于确定背景的位置 通常与background-positon联合使用

background-size来调整背景图片的大小,注意别和 clip 弄混,这个主要用于设定图片本身

background-size: contain; 缩小图片以适合元素(维持像素长宽比)
background-size: cover; 扩展元素以填补元素(维持像素长宽比)
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸

background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是
一个整体一 样)
background-break: bounding-box; 把盒之间的距离计算在内;
background-break: each-box; 为每个盒子单独重绘背景

counter()=[counter(name) | counters(name,list-style-type)]{1,}

counter-reset IE8

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
注释:如果使用 "display: none",则无法重置计数器。如果使用 "visibility: hidden",则可以重置计数器

JavaScript 语法: object.style.counterReset="subsection"

counter-reset的值none id number inherit

attr()=attr(attr-name)插入元素的属性值 IE8

calc() =calc(四则运算) 动态计算长度值 IE9
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;

initial属于css-wide关键字,这表示所有的属性都可以接受该值 IE11


unset 擦除属性声明

颜色值
color color的颜色名称,HEX,RGB,RGBA,HSL,HSLA,transparent,currentColor


currentColor

resolution分辨率值不允许有负值
频率单位包括有: dpi, dpcm, dppx

角度值 angle角度值的正常范围应在[0-360deg]内,例如:-10deg与350deg是等价的
角度单位包括有: deg, grad一个圆共400梯度, rad 一个圆共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad


长度值与单位

ch 数字“0”的宽度 ie9

rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对于视口的宽度。视口被均分为100单位的vw ie9
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
q 1/4毫米(quarter-millimeters)。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import@media@font-face@keyframes@supports

E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection
로그인 후 복사
E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target
로그인 후 복사

属性选择器
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素

【相关推荐】

1. CSS3免费视频教程

2. 分享一个CSS3的动画库

3. CSS3学习之Animation详解

4. CSS3教学之动画制作学习

5. 详细分析关于CSS3中新增的特性

위 내용은 CSS3의 새로운 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿