신기한거 !!!!!!! 애니메이션처럼 만들거야 오오오오!!
[변형1-반응선택자와 CSS속성변경을 통해 변형] : transition-duration
--> 마우스를 올려놓으면
그리고
마우스를 클릭하고 있으면
도형의 색깔,모양이 변하고 크기가 커지게 만듦 근데!!!!! 애니메이션처럼 움직이게 할 거임
<style>
#rect{
width: 150px;
height: 150px;
background-color: brown;
line-height: 150px;
text-align: center;
transition-duration: 3s ; /*변형이 일어나는데 걸리는 시간 설정 이거 설정해야 변화가 부.드.럽.게 이어져서 보임!!!*/
}
#rect:hover{ /*마우스 올렸을 때 변화*/
width: 300px;
height: 300px;
background-color: green;
line-height: 300px;
}
#rect:active{ /*클릭하고 있을 시 변화*/
background-color: rgb(252, 197, 115);
border-radius: 150px;
}
</style>
</head>
<body>
<h2>변형1-반응선택자와 CSS속성변경을 통해 변형</h2>
<div id="rect">RECTANGLE</div>
</body>변형1-반응선택자와 CSS속성변경을 통해 변형
[변형2-반응선택자와 CSS속성변경을 통해 변형]
[transition-xxxx : 변형을 부드럽게 만드는 속성들! ]
-transition-duration : 숫자 ; => 숫자시간만큼 변형이 이루어짐
-transition-property:background-color,width,height => 지정한 색깔,높이,넓이가 변함
-transition-timing-function: ease-in / linear / ease-out; => 변형 속도가 처음에 느렸다가 빨라짐 / 속도가 일정 / 처음에 빨랐다가 느려짐
- transition-delay: 숫자 ; =>숫자시간만큼 처음 동작 진행 이 딜레이 됨
예)
transition-duration:4s,3s,2s; =>변형이 일어나는 시간을 각각 지정가능함
한꺼번에 적용도 가능
transition-duration:4s;
transition-property:all;
transition: 2s 1s ease-out; => 단축속성! 1초 딜레이 후 시작, 2초 동안 변형이 이루어질 때 속도는 빨랐다 느려짐
----마우스 올렸을 때 변형 !!!
#content{
display: flex;
}
#rect1,#rect2{
width: 100px;
height: 100px;
/*단축속성 2초동안 일어나는데 1초는 딜레이됨 */
transition: 2s 1s ease-out;
transition-delay: ;
}
#rect1{
background-color: brown;
}
#rect2{
background-color: rgb(31, 114, 31);
}
#rect1:hover{
width: 300px;
height: 200px;
background-color: rgb(74, 74, 175);
}
#rect2:hover{
width: 200px;
height: 300px;
background-color: rgb(236, 190, 40);
}
</style>
</head>
<body>
<h2>변형2-반응선택자와 CSS속성변경을 통해 변형</h2>
<div id="content">
<div id="rect1"></div>
<div id="rect2"></div>
</div>
<div style="width:100px;height:100px;background-color: gold;"></div>
</body>변형2-반응선택자와 CSS속성변경을 통해 변형
[변형3-CSS함수를 통해 변형(반응 선택자와 CSS속성 변경이 아닌)]
transform : 속성지정 -> 요거 이용!
근데 !!!!!! 이건 그냥 변형된 상태임 ... transform 함수에는 애니메이션 동작이 적용 안됨
그니까 transition-duration:4s; 얘는 transform 함수에는 적용 안된다. !! 에이 얜 재미 없어....
그냥 예제만 보고 아하 그렇구나 하고넘어가...
<style>
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
#trans1{
background-color: brown;
/*transition-duration:4s; 얘는 여기에선 적용 안됨 transform 함수에는 적용 안된다.*/
/*함수를 이용한 변형 transform:함수()*/
transform: translateX(200px) rotate(90deg) scaleX(1.5);
}
#trans2{
background-color: rgb(243, 209, 55);
transform:translate(200px,200px) rotate(180deg) scale(2,2) skewX(45deg);
}
</style>
</head>
<body>
<h2>변형3-CSS함수를 통해 변형(반응 선택자와 CSS속성 변경이 아닌)</h2>
<div id="trans1">TRNAS1</div>
<div id="trans2">TRNAS2</div>
</body>
'학원 > CSS' 카테고리의 다른 글
| 11/11 41-2 [CSS] Import&Media (0) | 2022.11.11 |
|---|---|
| 11/11 41-2 [CSS] Keyframe (0) | 2022.11.11 |
| 11/10 40-4 [CSS] FLEX를 이용하여 인터넷 사이트처럼 배치하기 (0) | 2022.11.10 |
| 11/10 40-3 [CSS] FLEX_2[Flex Item에 적용되는 속성] (1) | 2022.11.10 |
| 11/10 40-2 [CSS] FLEX_1[Container에 적용되는 속성] (0) | 2022.11.10 |