<!--
트랜지션과 애니메이션 다른점
트랜지션은 시작점과 끝점만 존재한다.
하지만 애니메이션은 시작점과 중간점, 끝점이 존재한다.
1.애니메이션 등록
@keyframe 애니메이션명 {
0% {스타일시트 적용}
50% {스타일시트 적용}
100% {스타일시트 적용}
}
2.애니메이션 적용
선택자 {animation:애니메이션명 진행시간 가속도 지연시간 반복횟수 방향지정;}
반복횟수:infinite(무한반복), 숫자(반복횟수를 숫자로 지정)
방향지정:normal(좌>우), alternate(좌>우>좌)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0; box-sizing:border-box;}
div{ width: 250px; height: 250px; background: #000;
animation:ani 3s ease-in-out infinite alternate;
}
@keyframes ani{
0% {transform:translate(0,0) rotate(0deg);}
50% {
transform:translate(200px,0) rotate(90deg);
border-radius:50%;
}
100% { transform:translate(600px, 0) rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
---------------------------
<!--
※ 스타일시트 속성
1.박스 속성
display 속성: 박스의 유형(none:박스제거, block, inline-block, inline, flex)을 변경하는 속성
width 속성: 박스의 너비값 지정(데스크탑:px, 모바일:% / 부모요소:px, 자식요소:%)
height 속성: 박스의 높이값 지정(풀스크린:vh/ px)
margin 속성: 박스 외부 여백 지정(박스를 움직여서 배치)
padding 속성: 박스 내부 여백 지정(웹 콘텐츠를 수직중앙정렬, 박스 크기 확장)
border 속성: 박스 테두리 지정
border-radius : 박스의 형태를 변경 (모서리를 둥글게 처리)
box-sizing 속성: 박스의 너비와 높이에 padding과 border의 포함여부를 지정
box-shadow 속성: 박스의 그림자 지정 (0 0 0 20px rgba(0,0,0,0.3))
justify-content 속성: 아이템의 수평정렬(space-between)
align-items 속성: 아이템의 수직 정렬(center)
2.위치 속성
position 속성: 박스의 배치를 좌표값으로 지정(relative: 좌표의 기준점을 변경, absolute: 박스를 절대좌표로 위치/박스를 겹침, fixed:박스를 고정)
left 속성
right 속성
top 속성
bottom 속성
3.글자 속성
font-family 속성
font-size 속성
color 속성
font-weight 속성
font-style 속성
text-align 속성
line-height 속성
text-decoration 속성
text-transform 속성
text-shadow 속성
letter-spacing 속성
word-spacing 속성
4.배경 속성
background 속성(배경색상 배경이미지 반복여부 위치)
background-attachment 속성: fixed(고정)
background-size 속성: cover(박스의 크기에 맞춘다)
-->
-----
<!--
디바이스(단말기)의 크기에 따라 최적화된 화면을 제공한다.
모바일 단말기의 웹부라우저 해상도(385px, 420px, 768px, 1024px)에 맞춰라.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width, initial-scale=1">
<title>애니메이션실습문제</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px; padding: 0 50px; background: #000;
}
h1 a{ color:#fff; text-decoration: none; }
h1 a:hover{
animation:ani 1s infinite;
cursor: pointer;
}
@keyframes ani {
0% {color: red;}
25% {color: purple;}
50% {color: blue;}
75% {color: green;}
100% {color: brown;}
}
ul { list-style: none;
display: flex;
}
ul li a {
display:block; height: 40px; margin:0 10px; padding: 8px 30px;
text-decoration: none;
border: 1px solid transparent;
color: #fff;
transition: linear 0.15s; }
li a:hover{
border: 1px solid #fff;
border-radius: 25px;
background: linear-gradient(to bottom, rgb(201, 231, 255) 0%, rgb(78, 160, 214) 50%, rgb(84, 104, 219) 51%, rgb(136, 183, 255) 100%);
color: #000;
text-shadow: 0 1px 1px #fff;;
}
</style>
</head>
<body>
<header>
<h1><a href="#">회사로고</a></h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</header>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(13) (0) | 2021.07.27 |
|---|---|
| CSS 선수학습(12) (0) | 2021.07.27 |
| CSS 선수학습(10) (0) | 2021.07.21 |
| CSS 선수학습(9) (0) | 2021.07.21 |
| CSS 복습/실습 (0) | 2021.07.20 |