본문 바로가기

Frontend/CSS

 (9)
JS Animation JS Animation $("selector").animate(properties) properties : border, margin, padding, height, font-size, bottom, left, top, right, line-height, opacity, border-radisu (transformX) Effect Property Description .hide() 선택한 요소를 숨깁니다. .show() 선택한 요소를 보여줍니다. .tog..
GSAP Animation GSAP Animation 사이트 : https://greensock.com/ CDN : TweenMax.to(target, duration, {vars}); Position : 버튼 클릭하면 오른쪽으로 이동하기Start box box box //jquery$(".btn1").on("click",function(){ $(".box1_1,.box1_2,.box1_3").animate({ ..
SVG Animation SVG SVG(Scalable Vector Graphic)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. Rect Rect : border-radius ..
Box-shadow CSS Reference box-shadow : {h-shadow} {v-shadow} {blur} {spread} {color} {inset} / none; Porperty Description h-shadow 그림자의 수평(X) 축 거리를 나타냅니다. ..
Border-radius border-radius border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius border-radius: 5px 6px 7px 8px; = border-top-left-radius : 5px; = border-top-right-radius : 6px; = border-bottom-right-radius : 7px; = border-bottom-left-radiu..
Blend Effect background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. ..
CSS background background Porperty Sample Description background background : #000 url(경로) no-repeat top / cover 배경 속기형 작성법 background-image background-image : url("경로"); 배경 이미지 설정 ..
Animation Animation Animation animation : {name} {duration} {timing-function} {delay} {itration-count} {direction} {fill-mode} {play-state} Porperty Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니에이션이 실행되는 시간을 설정합니다. animation-timing-function 애니에이션 키프레임을 설..

티스토리툴바