9. <Portfolio> 웹 사이트 제작 - Main-Image / CSS Animation

안녕하세요. 이번 포스팅에서는 Main-Image에 CSS Animation 효과를 적용시켜 보겠습니다.

현재 Main-Image에 있는 Text들과 지시선들은 하나의 이미지로 되어있습니다. 그래서 이러한 Web상에서 Text와 border를 통해서 만들어 css애니메이션 효과를 적용시켜 보겠습니다.

 

먼저 안내 Text들이 없는 이미지를 준비해서 Main-Image에 적용 시켜 줍니다.

그리고 나서 Main image 태그 안에 div과 span 태그를 만들어 주고 css를 통해서 위치과 크기를 잡아줍니다.

 

	<div class="mainimg" data="children">
		<span> Children Park</span>
	</div>

	<div class="mainimg" data="acha">
		<span>Acha Mountain</span>

	</div>

.mainimg {
    font-size: 25px;
    position: absolute;
    display: block;
}

.mainimg > span {
    display: block;
    color: white;
    text-align: left;
    width: 200px;
    height: 30px;
}

 

여기에 css animation 코드를 통해서 text들이 왼쪽에서 나타나고 안내선이 나타나겠끔 만들어 줍니다.

 

See the Pen poombNV by hongsam (@hongsamhc) on CodePen.

위 그림처럼 애니매이션 마지막 부분입니다. 

 

다음 포스팅에서는 Jquery 통해서 각 Text들을 고정시켜 보겠습니다.