[CSS] Transition Animation 광주시 마우스 닿으면 전환되는 애니메이션 효과
오늘은 경기광주시청 홈페이지 내에 있는 애니메이션 전환 효과를 알려드리고자 해요.
들어간 효과가 어떤 것인지 살펴볼까요?
위 영상에서 보이는 것처럼
1. 박스에 닿을 때 박스가 올라가는 애니메이션 효과
2. 박스에 닿을 때 박스 색이 바뀌는 효과
3. 박스에 닿을 때 로고와 텍스트가 올라가고 내려가는 전환 효과
4. 그림자 효과
등이 있을 것 같아요.
그럼 순서대로 정리해보도록 해요!
하나씩 하나씩 기본 구조를 먼저 작성해보고
스타일을 적용해볼게요~
1. body 기본구조 타이틀 적기
<body>
<h2 id="title">광주시에 오신 것을 환영합니다.</h2>
</body>
2. 폰트 연결
딱 봐도 지마켓 산스 폰트길래 폰트링크를 가져와주었어요.
/*G마켓 폰트 CDN 연결*/
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
3. 모든 요소 공통사항 스타일 적용
* { /*모든 요소 공통사항*/
font-family: 'GmarketSansMedium';
box-sizing: border-box;
margin:0;
}
4. 타이틀 스타일 적용
#title {
font-size: 2em; /*영문 M 글자 기준으로 2배 크기임. 글자 기본크기 16px*2 = 32px*/
margin:1em 0;
text-align: center;
}
5. 바디 텍스트 먼저 지정
희망도시 행복광주는 일단 h3태그로 일단 적어만 두고 포토샵에서 그래픽으로 만들어 이미지를 삽입시킬 것임.
<body>
<h2 id="title">광주시에 오신 것을 환영합니다.</h2>
<div id="box">
<h3>희망도시 행복광주</h3>
<div id="text">
<h3>광주시청</h3>
<p>광주시 대표포털</p>
</div>
</div>
</body>
6. 바디 색깔 주기
body {
background: #fffbee;
}
7. 박스 스타일 줄 것들 미리 지정해놓기
#box { }
#box > h3 { }
#text { }
#text > h3 { }
#text > p { }8. 바깥쪽 전체박스에 스타일 주기
#box { /*바깥쪽 전체 박스*/
width: 400px;
background: #fff;
padding:2em;
border-radius: 1em;
margin: auto;
box-shadow: 0 1em 1em rgba(0,0,0,.2);
}
9. 광주 로고 포토샵에서 간단히 만들고 h2 부분을 없애주고 img src 태그로 바꾸어 넣어주기.
<body>
<h2 id="title">광주시에 오신 것을 환영합니다.</h2>
<div id="box">
<img src="images/gwangju.png" alt="희망도시 행복광주">
<div id="text">
<h3>광주시청</h3>
<p>광주시 대표포털</p>
</div>
</div>
</body>
10. 박스에 닿으면 애니메이션 전환 효과주고 여백주고 text-align 으로 배열 맞추기
#title {
font-size: 2em; /*영문 M 글자 기준으로 2배 크기임. 글자 기본크기 16px*2 = 32px*/
margin:1em 0;
text-align: center;
}
#box { /*바깥쪽 전체 박스*/
text-align:center;
width: 400px;
background: #423537;
padding:2em;
border-radius: 1em;
margin: auto;
box-shadow: 0 1em 1em rgba(0,0,0,.2);
transition: .3s
}
/*전체 박스에 닿으면 배경색/위치 바꾸기*/
#box:hover {
background: #F24130;
transform: translateY(-1em);
box-shadow: 0 2em 1em rgba(0,0,0,.2);
}
#box > img { /*로고 이미지*/
width:70%;
margin: 1em 0;
transition: .3s;
}
#text {
margin: 1em 0;
}
/*박스에 닿으면 이미지를 아래로 이동*/
#box:hover > img {
transform: translateY(80%);
filter:brightness(100%);
}
/*박스에 닿으면 이미지를 위로 이동*/
#box:hover > #text {
transform: translateY(-250%);
color:#FFF;
}
#box:hover > #text > h3 {
color:#ffcbc8;
}
#text > h3 {
font-szie:1.5em; color: #f8b9b9;
}
#text > p {
color:#FFF;
}
</style>
[완료]
기본 서식에 색상을 바꾸어주었습니다.
색상과 로고 이미지 만드셔서 이미지만 바꾸셔서 사용하면 되실 듯 합니다.^^
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
/*G마켓 폰트 CDN 연결*/
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* { /*모든 요소 공통사항*/
font-family: 'GmarketSansMedium';
box-sizing: border-box;
margin:0;
}
body {
background: #F2F2F2;
}
#title {
font-size: 2em; /*영문 M 글자 기준으로 2배 크기임. 글자 기본크기 16px*2 = 32px*/
margin:1em 0;
text-align: center;
}
#box { /*바깥쪽 전체 박스*/
text-align:center;
width: 400px;
background: #423537;
padding:2em;
border-radius: 1em;
margin: auto;
box-shadow: 0 1em 1em rgba(0,0,0,.2);
transition: .3s
}
/*전체 박스에 닿으면 배경색/위치 바꾸기*/
#box:hover {
background: #F24130;
transform: translateY(-1em);
box-shadow: 0 2em 1em rgba(0,0,0,.2);
}
#box > img { /*로고 이미지*/
width:70%;
margin: 1em 0;
transition: .3s;
}
#text {
margin: 1em 0;
}
/*박스에 닿으면 이미지를 아래로 이동*/
#box:hover > img {
transform: translateY(80%);
filter:brightness(100%);
}
/*박스에 닿으면 이미지를 위로 이동*/
#box:hover > #text {
transform: translateY(-250%);
color:#FFF;
}
#box:hover > #text > h3 {
color:#ffcbc8;
}
#text > h3 {
font-szie:1.5em; color: #f8b9b9;
}
#text > p {
color:#FFF;
}
</style>
</head>
<body>
<h2 id="title">광주시에 오신 것을 환영합니다.</h2>
<div id="box">
<img src="images/gwangju.png" alt="희망도시 행복광주">
<div id="text">
<h3>광주시청</h3>
<p>광주시 대표포털</p>
</div>
</div>
</body>
</html>
'IT > 웹코딩기초' 카테고리의 다른 글
| [웹사이트_리디자인] 화면설계 - 와이어프레임, 메인페이지, 스토리보드 레이아웃 잡는 방법 (0) | 2023.05.23 |
|---|---|
| [HTML/CSS] 제주 게스트하우스/펜션민박집 - 메인 웹페이지 리디자인(화면설계 과정/파일코드공유) (0) | 2023.05.15 |
| [HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제 (0) | 2023.05.10 |
| [HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기 (1) | 2023.05.09 |
| [CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리 (0) | 2023.05.08 |
댓글