/
ex_6_style.css
129 lines (96 loc) · 2.86 KB
/
ex_6_style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
.transform {
width: 300px;
height: 300px;
background-color: yellow ;
/*transform: rotate(-10deg); 2차원적인 회전, 양수or음수*/
/*transform: scale(2,3); 비율로 키울 때, x,y 축 2배 3배 키우겠다. 소숫점가능*/
/*transform: skew(-10deg, 20deg); 3차원적인 회전, x,y*/
/*transform: translate(100px, 300px); 내가 선택한 오브젝트의 위치를 변경할 때 ,x,y축*/
/*margin-left: 300px;*/
/*margin-top: 500px;*/
/*-webkit-transform: rotate(10deg); 크롬, 사파리*/
/*-moz-transform: rotate(10deg);파이어폭스*/
/*-ms-transform: rotate(10deg);익스플로어*/
/*-o-transform: rotate(10deg);오페라*/
/*transform: rotate(10deg); 지원가능 브라우저 외 하위브라우저 사용하고싶을 때 프리픽스,*/
프리픽스 입력 후 transform값을 디폴트로 입력해야함
}
/*https://www.w3schools.com/*/
.transition {
width: 300px;
height: 300px;
background-color: pink;
/*transition-property: width; trasition값을 줄 항목
transition-duration: 2s; 지속되는 시간
transition-timing-function: linear; 일정한 속도로 진행
transition-delay: 1s; 1초 있다가 시작
*/
transition: width 2s linear , height 2s linear;
/*먼저 나오는 숫자가 duration 다음이 delay 하나만 있을 경우 duration으로 인식
*/
}
.transition:hover {
width: 600px;
height: 600px;
}
.animation {
width: 300px;
height: 300px;
background-color: yellowgreen;
animation-name: changewidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/*direction : normal은 기본 | altrenate 자연스럽게 반복,but from-to-from-to각각 1회씩 반복
infinite는 무한반복 */
}
/*animation을 사용했을 때는 @keyframes와 함께 해야하고 ,지정한 애니메이션 네임과 연동시켜준다
from-to(0%-100%)도 필수*/
@keyframes changewidth {
0%{
width: 300px;
height: 300px;
background-color: yellogreen;
}
50%{
background-color: darkgreen;
}
100%{
width: 600px;
height: 600px;
background-color: yellow;
}
}
.spin-lion {
width: 150px;
height: 150px;
background-color: cadetblue;
/*
animation-name: spinlion;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
*/
-webkit-animation: spinlion 1.5s linear infinite alternate;
animation: spinlion 1.5s linear infinite alternate;
}
@-webkit-keyframes spinlion {
from{
-webkit-transform: rotate(-10deg);
}
to {
-webkit-transform: rotate(10deg);
}
}
@keyframes spinlion {
from{
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}
/*https://jeremyckahn.github.io/stylie/*/