CSS3(코드 포함)를 사용하여 간단한 로켓 애니메이션 만들기-CSS 튜토리얼-php.cn

CSS3(코드 포함)를 사용하여 간단한 로켓 애니메이션 만들기

青灯夜游

풀어 주다： 2018-11-06 16:04:51

원래의

3858명이 탐색했습니다.

이 글의 내용은 CSS3를 사용하여 간단한 로켓 애니메이션(코드 포함)을 만드는 것입니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

이전 글 [css3 애니메이션 변형 속성 및 전환 속성의 단순 사용]에서는 변형 속성 및 전환 속성의 단순 사용에 대해 소개했습니다. 아래에서는 변형 속성과 전환 속성을 사용하여 다양한 효과를 결합하여 마우스 호버링 및 로켓 비행과 같은 간단한 애니메이션 효과를 얻는 방법을 소개합니다. 코드를 살펴보겠습니다!

html 코드:

<div id="outerspace">
	<div class="rocket">
		<div>
			<!-- rocket -->
		</div>
				火箭
	</div>
</div>

로그인 후 복사

css 코드 1:

/* 初始状态 */

#outerspace {
	width: 800px;
	height: 500px;
	margin: 100px auto;
	position: relative;
	height: 400px;
	background: #0c0440 url(img/outerspace.jpg);
	color: #fff;
}

div.rocket {
	position: absolute;
	bottom: 10px;
	left: 20px;
	
}

div.rocket div {
	width: 92px;
	height: 215px;
	background: url(img/rocket.gif) no-repeat;
	
}

로그인 후 복사

CSS3(코드 포함)를 사용하여 간단한 로켓 애니메이션 만들기

효과, CSS2 코드:

/* 悬停效果 */

#outerspace:hover div.rocket {
	-webkit-transform: translate(540px, -200px);
	-moz-transform: translate(540px, -200px);
	-o-transform: translate(540px, -200px);
	-ms-transform: translate(540px, -200px);
	transform: translate(540px, -200px);
}

#outerspace:hover div.rocket div {
	-webkit-transform: rotate(70deg);
	-moz-transform: rotate(70deg);
	-o-transform: rotate(70deg);
	-ms-transform: rotate(70deg);
	transform: rotate(70deg);
}

로그인 후 복사

CSS3(코드 포함)를 사용하여 간단한 로켓 애니메이션 만들기

마우스를 가리키면 변환이 이루어지지만 효과는 약간 갑작스럽고 필요합니다. 전환 효과가 추가됩니다.

원래 css1 코드, css3 코드에 전환 추가:

div.rocket {
	position: absolute;
	bottom: 10px;
	left: 20px;
	-webkit-transition: 3s ease-in;
	-moz-transition: 3s ease-in;
	-o-transition: 3s ease-in;
	transition: 3s ease-in;
}

div.rocket div {
	width: 92px;
	height: 215px;
	background: url(img/rocket.gif) no-repeat;
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	-o-transition: 2s ease-in-out;
	transition: 2s ease-in-out;
}

로그인 후 복사

CSS3(코드 포함)를 사용하여 간단한 로켓 애니메이션 만들기