본문 바로가기

transition5

HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 코드 .container{ width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box{ width: 100px; height: 130px; border: 1px solid #000; border-radius: 5px; position: absolute; top: 35%; left: 40%; } .btn{ width: 50px; height: 50px; border: 1px solid #000; } .box1{ background: crimson; z-index: 1; } .box2{ background: darkorange; z-index: 0; } .box3{ background:gold; z-index: 0; } .b.. 2022. 1. 28.

CSS _transition(2) (timing-function) 저번에 이어서 transition 두 번째 timing-function을 알아보았다. timing-function 전환효과의 시간당 속도를 조정한다. 값의 종류 1. ease : 기본값 / 점점 속도가 증가하다가 느려짐 2. linear : 똑같은 속도로 끝까지 3. ease-in : 천천히 시작하여 끝날때까지 빨라짐 4. ease-out : 빠르게 시작해서 느려지며 끝 5. ease-in-out : 천천히 시작해서 빨라졌다가 다시 느려짐 6. steps(단계 수, jump-term) 7. step-start : steps(1, start)와 동일 8. step-end : steps(1, end)와 동일 9. cubic-bezier(p1, p2, p3, p4) : 베지어 곡선 1~5까지 모두 베지어 곡선.. 2022. 1. 14.

CSS _transition(1) (property, timing, delay) 저번에 css가상클래스 hover를 알아볼 때 잠시 다뤘던 transition에 대해서 좀 더 공부해보았다. transition = 변경 이다. 따라서 요소의 상태 변화를 다룰 수 있는데 transition은 단축 속성이고 property, duration, delay, timing-function 이렇게 4가지가 있다. 각각을 간단히 알아보면 1. property : 변화를 적용시킬 CSS 속성 지정 2. duration : 변화시간 지정 3. delay : 지연 시간 지정 (시간 지난 후 시작) 4. timing-function : 변화되는 과정 중 속도 지정 property & duration div:hover { transition-property: width; transition-duration.. 2022. 1. 14.

CSS 가상클래스 (1)-2_마우스 오버 효과(hover, transition) 추가! hover와 transition을 가지고 놀다가 transition에 width와 height의 속도를 다르게 적용할 수 있는 것을 발견했다. .parent { width: 400px; height: 200px; position: relative; } .child { position: absolute; width: 25px; height: 25px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: blueviolet; transition: width 0.95s, height 1s; } .child:hover { width: 100%; height: 100%; background-color: rgb(216, 179, 250);.. 2022. 1. 7.

CSS 가상클래스 (1)_마우스 오버 효과(hover, transition) 마우스가 올라갔을 때 변화를 주는 가상클래스에 대해서 알아보자 hover a태그로 hover를 활용해보았다. 들어가기전에 a태그 관련 알아둘 것 1. href 속성을 비워두면 jQuery가 작동하지 않는다. -> #none을 넣어주자! 2. body의 색상 속성을 적용받지 않는다. 사용법 선택자:hover 위처럼 선택자 뒤에 가상클래스를 적어주면 되는데 선택자와 가상클래스 사이에 띄어쓰기가 있으면 안된다! 예시1 공지사항 Q&A 커뮤니티 body { background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; font-weight: 700; transition: 0.3s; } a:hover { .. 2022. 1. 7.

이전 1 다음

티스토리툴바