집 > 기사 > 웹 프론트엔드 > CSS 전환이란 무엇입니까? CSS의 전환 요소에 대한 간략한 소개

CSS 전환이란 무엇입니까? CSS의 전환 요소에 대한 간략한 소개

不言원래의: 2018-08-10 10:28:493202검색

이 글의 내용은 CSS 전환이란 무엇인가요? CSS의 전환 요소에 대한 간략한 소개는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css 전환: 한 스타일에서 다른 스타일로 점진적으로 변경되는 요소의 효과입니다.
전환 필수 조건:

1.전환되는 요소에는 CSS 스타일이 있어야 합니다.

2.전환시간이 있어야 합니다.

다음은 전환 요소의 속성입니다.

transition: 단축 속성, 하나의 속성에 4개의 전환 속성을 설정하는 데 사용됩니다.

transition-property: 전환이 적용되는 CSS 속성의 이름을 지정합니다.

transition-duration: 전환에 소요되는 시간입니다.

transition-timing-function: 전환 요소의 시간 곡선, 속성 값은 선형(균일한 속도의 과정), Ease(점진적으로 느려지는 과정),easy-in(점진적으로 느려지는 과정) 가속),easy-out(감속 과정),cubic-bezier(0,0,0,0) 베지어 곡선

transition-delay: 전환의 시작 시간을 지정합니다(즉, 전환에 걸리는 시간). 실행 시작), 기본값은 0

일반적으로 전환 효과를 사용합니다. 마우스가 슬라이드되거나 클릭된 후 마우스 슬라이드를 예로 들어 보겠습니다.

1 마우스 슬라이드 오버의 너비는 120%가 됩니다. 원본

2. 마우스를 슬라이드하면 그림자가 추가됩니다

3. 마우스를 슬라이드하면 패닝, 회전, 크기 조정, 왜곡 및 기타 효과가 발생합니다.

transform(2D 변환)

속성 값은 다음과 같습니다: 이동(이동), 회전(회전), 크기 조절(확대/축소), 기울이기(왜곡)

html 부분

<body>
	<div id="box">
			
	</div>
</body>

css 부분:

#box{
			height: 200px;
			width: 200px;
			border:1px solid #000;
			/*1.鼠标滑过宽度变为原来的120%*/
			transition-property: width; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			/*2.鼠标滑过加上阴影*/
			transition-property: box-shadow; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			
			/*以上写法比较麻烦所以可以简写成：*/
			transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
			
			-ms-transition: all 1s linear 0s;/*兼容IE10+*/
			-moz-transform: all 1s linear 0s;/*兼容 Firefox */
			-o-transition: all 1s linear 0s;/* 兼容Opera */
			-webkit-transform:  all 1s linear 0s;/* 兼容Safari and Chrome */;
			
		}
		
		/*transform(2D转换)
		属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
		
		#box:hover{
			width: 120%;
			box-shadow: 0px 0px 5px orange;
			
	       /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
			/*1.平移*/
			transform: translate(50px,50px);  /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
			-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
			-ms-transform: translate(50px,50px);/*兼容IE10+*/
			-moz-transform: translate(50px,50px);/*兼容 Firefox */
			-o-transform: translate(50px,50px);/* 兼容Opera */
			/*只让x轴平移*/
			transform: translateX(50px); 
			
			-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateX(50px);/*兼容IE10+*/
			-moz-transform: translateX(50px);/*兼容 Firefox */
			-o-transform:  translateX(50px);/* 兼容Opera */
			/*只让y轴平移*/
			transform: translateY(50px);
			
			-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateY(50px);/*兼容IE10+*/
			-moz-transform: translateY(50px);/*兼容 Firefox */
			-o-transform:  translateY(50px);/* 兼容Opera */
			
			/*2.旋转*//*兼容性同 平移*/
			transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
			 /*只让x轴旋转*/
			 transform:rotateX(45deg);
			 /*只让y轴旋转,相当一3D旋转*/
			 transform:rotateY(45deg);
			 
			 
			/*3.缩放*//*兼容性同 平移*/
			transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
			
			/*4.扭曲*//*兼容性同 平移*/
			
			transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
	
		}

CSS 전환이란 무엇입니까? CSS의 전환 요소에 대한 간략한 소개

관련 기사