[ CSS / HTML ] relative를 이용한 디자인
2024. 4. 15. 22:43ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative를 이용한 디자인</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
/*
relative를 이용한 디자인
*/
.effect-lift {
position: relative;
z-index: 99;
transition: bottom 0.1s ease-out;
bottom: 0px;
}
.effect-lift:hover {
bottom: 2px;
}
.effect-shake {
position: relative;
z-index: 99; /*애니메이션이 맨 위에서 보이도록 큰 숫자를 의미적으로 부여*/
}
.effect-shake:hover {
/* animation : 애니메이션이름 딜레이 타이밍 실행시간 반복횟수 [기타옵션] */
animation: shake linear 0.15s infinite;
}
/* 움직임에 대한 상세한 시나리오 작성 */
@keyframes shake {
0% { left: 0px; }
25% { left: -1px; }
50% { left: 0px; }
75% { left: 1px; }
100% { left: 0px;}
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>relative position</h1>
</div>
<div class="cell">
<img class="effect-lift" src="image/hachiware.jpg" width="100">
<img class="effect-shake" src="image/alarm.jpeg" width="300">
</div>
</div>
</body>
</html>(+) effect-lift : 이미지 들어올리기 기능 구현
(+) effect-shake : 이미지 흔들리게 구현
animation : 애니메이션이름 딜레이 타이밍 실행시간 반복횟수 [기타옵션];
@keyframes 에 움직임에 대한 상세한 시나리오를 작성하여 움직임을 구현.
└ 보통 0/25/50/75/100%로 나누어서 움직임을 구현함
relative를 이용한 디자인 - Chrome 2024-02-14 14-20-10.mp4
2.42MB
움직이는게 궁금하다면.. 보십시오..
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 아이콘 디자인 (0) | 2024.04.18 |
|---|---|
| [ CSS / HTML ] 전체화면 가리기, overlay를 중앙에 오게하는 방법 (0) | 2024.04.17 |
| [ CSS / HTML ] 배치방식 이해 (0) | 2024.04.14 |
| [ CSS / HTML ] 이미지 꾸미기 (0) | 2024.04.13 |
| [ CSS / HTML ] 네비게이터 꾸미기 (0) | 2024.04.12 |