본문 바로가기
반응형

IT/effect_ex7

car animation 자동차가 오른쪽에서 -> 왼쪽으로 달려오면서 브레이크 밟으면서 멈추는 효과 left 로 이동하는 위치값을 잡고 transform rotate으로 위로 살짝 올라가는 각도 설정함 See the Pen car animation by wao816 (@hy16) on CodePen. 2021. 2. 12.
css 깜빡이는 불빛, slide down effect 강조하기위한 css animation 효과로 깜빡거리는는 불빛 효과(전등이 켜지는 듯한 효과, 스포트라이트), 배너나 현수막 등 슬라이드 되며 내려오는 효과 slide down See the Pen abBzrzL by wao816 (@hy16) on CodePen. 2021. 2. 2.
css black bord / 칠판 애니메이션 칠판에 글씨가 지워지고 새로운 글씨가 나타나는 효과 css animation 시간, 딜레이 차이 체크 ie 8이하 img opacity:0 이 작동하지 않을 때 {opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; filter: alpha(opacity=00);} See the Pen jOMKrQV by wao816 (@hy16) on CodePen. 2021. 1. 14.
css button hover effect / 버튼 마우스호버 효과 버튼에 마우스 호버했을때 버튼이 scale 1.1 되면서 빛 반짝이는, 빛이 지나가는 효과 See the Pen KKgezxO by wao816 (@hy16) on CodePen. 2021. 1. 13.
css circle rotate 글씨있는 도형 3d로 360로 돌리는 효과 나타내기 See the Pen circle rotate by wao816 (@hy16) on CodePen. 일정한 시간, 방향으로 회전하기 transform: rotateZ(360deg); See the Pen LYbEvjy by wao816 (@hy16) on CodePen. 2021. 1. 11.
css 화살표 효과 / arrow effect 1. 화살표 위아래로 움직이면서 하얀색으로 깜박이는 효과 scroll down See the Pen arrow by wao816 (@hy16) on CodePen. 2021. 1. 10.
css 글씨 효과 / 텍스트 효과 1. css 글씨 물결치는 효과 span태그에 delay 시간을 각각 조절한다 See the Pen NWRMMMy by wao816 (@hy16) on CodePen. animation 시간 조절로 작동되는 시간 조절할 수 있다 See the Pen vYXjrYZ by wao816 (@hy16) on CodePen. 2021. 1. 8.
반응형