CSS를 사용하여 왼쪽 및 오른쪽 이동 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 왼쪽 및 오른쪽 이동 효과를 얻는 방법

青灯夜游

풀어 주다： 2021-07-14 17:45:14

원래의

3713명이 탐색했습니다.

CSS에서는 "@keyframes" 규칙과 애니메이션 속성을 사용하여 왼쪽 및 오른쪽 모션 효과를 얻을 수 있습니다. 주요 구문은 "@keyframes 애니메이션 이름 {0% {left:0px;}50%{left:200px;}입니다. 100% {왼쪽 :0px;}}".

CSS를 사용하여 왼쪽 및 오른쪽 이동 효과를 얻는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 "@keyframes" 규칙과 애니메이션 속성을 사용하여 왼쪽 및 오른쪽 이동 효과를 얻을 수 있습니다.

코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	0% {left:0px;}
	50%{left:200px;}
	100% {left:0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	0% {left:0px;}
	50%{left:200px;}
	100% {left:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

로그인 후 복사

Rendering:

CSS를 사용하여 왼쪽 및 오른쪽 이동 효과를 얻는 방법

설명:

@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다. 애니메이션은 하나의 CSS 스타일 설정에서 다른 CSS 스타일 설정으로 점진적으로 변경하여 생성됩니다.

애니메이션 프로세스 중에 CSS 스타일 설정을 여러 번 변경할 수 있습니다.

% 또는 키워드 "from" 및 "to"를 사용하여 변경 사항이 발생하는 시점을 지정합니다. 이는 0%~100%와 동일합니다. 0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 종료되는 시점입니다.

구문:

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

로그인 후 복사

value	description
animationname	필수입니다. 애니메이션의 이름을 정의합니다. animation 속성으로 정의됩니다.
keyframes-selector	필수입니다. 애니메이션 지속 시간의 백분율입니다. 법적 가치: 0-100% (0%와 동일) (100% 동일) 참고: 애니메이션 키프레임 선택기를 사용할 수 있습니다.
css-styles	필수입니다. 하나 이상의 합법적인 CSS 스타일 속성

value

description

animationname

필수입니다. 애니메이션의 이름을 정의합니다. animation 속성으로 정의됩니다.

keyframes-selector

필수입니다. 애니메이션 지속 시간의 백분율입니다.

법적 가치:

0-100%
(0%와 동일)
(100% 동일)

참고: 애니메이션 키프레임 선택기를 사용할 수 있습니다.

css-styles

필수입니다. 하나 이상의 합법적인 CSS 스타일 속성

(동영상 공유 학습: css 동영상 튜토리얼)