<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } #wrap { width: 100%; } #header { width: 100%; height: 120px; background-color: aqua; padding-top: 87px; box-sizing: border-box; } #header ul { margin: 0 auto; width: 1000px; height: 30px; border: 1px solid #ccc; } #header ul li { float: left; width: 200px; height: 30px; text-align: center; line-height: 30px; border-right: 1px solid #ccc; box-sizing: border-box; } #header ul li:last-child { border-right: 0px; } #header ul li a { display: block; font-size: 18px; } #header ul li:hover a { background-color: tomato; color: #fff; transition: 1s ease-in-out; } #header .submn_area { position: absolute; top: 118px; left: 0; width: 100%; height: 0px; background-color: #ccc; overflow: hidden; transition: all 0.7s; } #header_in:hover .submn_area { height: 250px; /* transition: all 0.7s; */ } #main_img { width: 100%; height: 400px; background-color: tomato; } </style>
transition을 사용해 메뉴에 커서가 올라갔을시에 서브메뉴까지 촤라락 펼쳐지며 보일 수 있게 만들 수 있다.
<style> div { margin: 100px; width: 300px; height: 200px; border: 5px solid #333; background-color: greenyellow; /* outline-style: dotted; 아웃라인의 형식 outline-width: 3px; 아웃라인의 두께 outline-color: tomato; 색상 */ /* outline 요소의 아웃라인을 그림 border와는 별개의 속성이며, border를 설정하는 것과 같이 아래의 속성을 단축하여 사용할 수 있음. */ outline: 3px dotted tomato; /* border와 다르게 바깥쪽에 생긴다 */ outline-offset: -20px; /* border와 outline 사이의 여백 주기 */ /* +,- 값 가능 */ } </style> </head> <body> <div></div>
<style> div { margin: 100px; width: 300px; height: 200px; border: 5px solid #333; background-color: greenyellow; box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.5); } /* text-shadow: [dx] [dy] [bulr] [spread] [color]; 텍스트에 그림자를 지정 dx: 본체와 그림자의 가로방향 거리 (+ 값이면 오른쪽으로, - 값이면 왼쪽으로) dy: 본체와 그림자의 세로방향 거리 (+ 값이면 아래쪽으로, - 값이면 위쪽으로) bulr: 그림자의 흐려짐 정도 (=그림자의 사이즈) spread: 그림자의 번짐정도 (=그림자의 테두리 선명도) color: 그림자의 색상 set: 그림자의 형태 * outset: 요소 바깥쪽으로 그림자가 떨어짐 (default) * inset: 요소 안쪽으로 그림자가 떨어짐 */ h1 { font-size: 150px; color: burlywood; text-shadow: 0 0 4px #ccc, 0 -3px 4px #ff3, -1px 9px 11px #f80, 1px -12px 18px #f20; } /* 셰도우는 여러개 설정 가능 */ </style> </head> <body> <div></div> <h1>ABC</h1>
<style> div { margin: 100px; width: 200px; height: 200px; border: 5px solid #333; background-color: rgba(134, 221, 2, 0.829); box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.5); } /* translate([dx],[dy]): 지정한 크기 만큼 이동 시킴 scale([ds]): 지정한 배율 만큼 확대함 rotate([deg]): 지정한 각도만큼 회전시킴 skew([degx],[degy]): 지정한 경사로 기울림 transform-origin: y, x; transform-origin: center; transform-origin: top left; 기준점을 지정해줌 x: 요소의 가로값 y: 요소의 세로값 */ .box01 { transform: translate(200px, 0); } /* 상대값이다. 즉, 자기 자신의 현재 위치에서 주어진 설정만큼 이동 */ .box02 { } .box02 div { margin: 0; transform: rotate(45deg); transform-origin: 50px 50px; } .box03 { transform: scale(0.5); } /* 배수이다 */ .box04 { transform: skew(0, -45deg); } </style> </head> <body> <div class="box01">translate(200px, 0)</div> <div class="box02"> <div></div> </div> <div class="box03">scale(0.5)</div> <div class="box04">skew(0, -45deg)</div> </body>
<style> div { margin: 50px; width: 100px; height: 100px; border: 5px solid #333; background-color: violet; cursor: pointer; transition: all 0.5s; } /* transition:[변환속성],[에니메이션 시간] transition-duration : 에니메이션이 실행시간을 지정함 transition-delay: 애니메이션의 지연시간을 지정함 transition-property : 어떤 속성을 변형할지 지정함 transition-timing-function : 에니메이션이 속도 형태를 지정함 linear:시작에서 끝까지 똑같은 속도로 진행 ease:처음에는 천천히 시작하고 점점빨라지다가 마지막엔 천천히 끝남 ease-in:시작은 느리게 ease-out:느리게 끝냄 ease-in-out:느리게 시작하고 느리게 끝냄 cubic-bezier:직접 베이직 함수를 정의해서 사용 */ .box0 { background-color: rgb(154, 154, 94); transform: scale(1) rotate(0deg); transition: all 0.5s; } .box0:hover { background-color: yellow; transform: scale(1.5) rotate(-45deg); transition-delay: 0s; transition-duration: 1s; transition-property: all; transition-timing-function: ease-in-out; font-size: 30px; } .inbox1 { margin: 0; border: 0px; background-color: yellow; } .box1:hover .inbox1 { transition-delay: 0s; transition-duration: 2s; transition-property: all; transition-timing-function: ease-in-out; transform: translate(1000px, 0); } /* box2-1 위에 커서를 올리면 box2-2의 애니메이션이 실행된다 */ .box2-1:hover+.box2-2 { width: 500px; transition-delay: 0s; transition-duration: 1s; transition-property: all; transition-timing-function: ease-in-out; } /* box2-3의 경우, 같은 형제이나 거리가 좀 떨어져 있기 때문에 + 대신 ~를 써준다 */ .box3-1:hover~.box3-3 { width: 500px; transition-delay: 0s; transition-duration: 1s; transition-property: all; transition-timing-function: ease-in-out; } </style> </head> <body> <!-- 요소 자기자신에게 애니메이션 설정 --> <div class="box0">text</div> <!-- 자식요소 애니메이션 설정 --> <div class="box1"> <div class="inbox1">text</div> </div> <!-- 해당요소에 바로 아래에 있는 요소 애니메이션 설정 --> <div class="box2-1">2-1</div> <div class="box2-2">2-2</div> <!-- 해당요소에서 하나이상의 요소와 떨어져 있는 요소에 애니메이션 설정 --> <div class="box3-1">3-1</div> <div class="box3-2">3-2</div> <div class="box3-3">3-3</div> </body>
<style> /* animation:[변환속성],[에니메이션 시간] animation-name : 애니메이션 이름을 지정함 animation-duration : 에니메이션이 실행시간을 지정함 animation-delay: 애니메이션의 지연시간을 지정함 animation-direction:애니메이션의 진행방향 지정함 alternate;반대방향으로 진행 normal:원래방향으로 진행 animation-iteration-count : 에니메이션이 반복 회수를 지정함 animation-property : 어떤 속성을 변형할지 지정함 animation-timing-function : 에니메이션이 속도 형태를 지정함 linear:시작에서 끝까지 똑같은 속도로 진행 ease:처음에는 천천히 시작하고 점점빨라지다가 마지막엔 천천히 끝남 ease-in:시작은 느리게 ease-out:느리게 끝냄 ease-in-out:느리게 시작하고 느리게 끝냄 cubic-bezier:직접베이직 함수를 정의해서 사용 */ /* keyframes에니메이션의 키프래임을 지정함 form : 에니메이션의 시작 프래임를 설정함 to : 에니메이션의 시작 프래임를 설정함중간의 키프레임을 %단위로 지정할수 있음 */ .box1 { width: 100px; height: 100px; border: 1px solid #000; animation-name: ani1; animation-delay: 1s; animation-duration: 5s; animation-iteration-count: infinite; /* infinite:무한반복, 10: 10회*/ animation-direction: alternate; animation-timing-function: ease-in-out; /* transform: translate(0px, 0px); */ } @keyframes ani1 { from { /*0%*/ transform: translate(0px, 0px); } 10% { transform: translate(0px, 500px); } 90% { /*100%*/ transform: translate(500px, 500px); } to { /*100%*/ transform: translate(500px, 500px); } } .box2 { width: 100px; height: 100px; border: 1px solid #000; animation-name: ani2; animation-delay: 1s; animation-duration: 5s; animation-iteration-count: infinite; /* infinite:무한반복, 10: 10회*/ /* animation-direction: alternate; */ animation-timing-function: ease-in-out; /* transform: translate(0px, 0px); */ position: absolute; top: 100px; left: 200px; } @keyframes ani2 { 0% { position: absolute; top: 100px; left: 200px; } 20% { position: absolute; top: 100px; left: 1800px; } 60% { position: absolute; top: 500px; left: 800px; } 40% { position: absolute; top: 500px; left: 1800px; } 100% { position: absolute; top: 100px; left: 200px; } } </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body>
<style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; border: 1px solid #000; } .box1 { animation-name: ani1; animation-delay: 2s; animation-duration: 5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; top: 0; left: 0; } @keyframes ani1 { from { position: absolute; top: 0; left: 0; transform: scale(1) rotate(0deg); } 50% { background-color: yellowgreen; } to { position: absolute; top: 0; left: 1200px; transform: scale(0.5) rotate(-360deg); } } .box2 { animation-name: ani2; animation-delay: 4s; animation-duration: 5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; top: 100px; left: 0; } @keyframes ani2 { from { position: absolute; top: 100px; left: 0; transform: scale(1) rotate(0deg); } 50% { background-color: rgb(229, 123, 25); } to { position: absolute; top: 0; left: 1200px; transform: scale(0.5) rotate(-360deg); } } .box3 { animation-name: ani3; animation-delay: 6s; animation-duration: 5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; top: 200px; left: 0; } @keyframes ani3 { from { position: absolute; top: 200px; left: 0; transform: scale(1) rotate(0deg); } 50% { background-color: rgb(30, 185, 228); } to { position: absolute; top: 0; left: 1200px; transform: scale(0.5) rotate(-360deg); } } .box4 { animation-name: ani4; animation-delay: 8s; animation-duration: 5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; top: 300px; left: 0; } @keyframes ani4 { from { position: absolute; top: 300px; left: 0; transform: scale(1) rotate(0deg); } 50% { background-color: rgb(231, 37, 218); } to { position: absolute; top: 0; left: 1200px; transform: scale(0.5) rotate(-360deg); } } .box5 { animation-name: ani5; animation-delay: 10s; animation-duration: 5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; top: 400px; left: 0; } @keyframes ani5 { from { position: absolute; top: 400px; left: 0; transform: scale(1) rotate(0deg); } 50% { background-color: rgb(205, 58, 50); } to { position: absolute; top: 0; left: 1200px; transform: scale(0.5); transform: scale(0.5) rotate(-360deg); } } </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> <div class="box5">box5</div> </body>