css (72) 썸네일형 리스트형 11장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 #container { width:200px; margin:30px auto; } img { border:1px solid #ccc; border-radius:50%; box-shadow:5px 5px 30px 2px #000; animation:rotateBear 2.5s infinite; } @keyframes rotateBear { from{transform: perspective(200px) rotateY(0deg);} 50% {transform: perspective(200px) rotateY(-180deg);} to {transform:perspective(200px) rotateY(-360deg);} } 11장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 * { box-sizing: border-box; } .top-menu { margin:50px auto; padding:0; list-style:none; width:605px; height:35px; box-shadow:0 3px 4px #8b8b8b; background-color:#dadada; } .top-menu li { float:left; border-right:1px solid #929292; } .top-menu li a:link{ color:black; text-decoration:none; text-align:center; display:block; width:100px; height:35px; line-height: 35px; transit.. 11장 예제 - 애니메이션 2개를 한꺼번에 지정하기 DOCTYPE html> 무한 반복하는 애니메이션 만들기 .box { width:100px; height:100px; margin:60px auto; animation: rotate 1.5s infinite, background 1.5s infinite alternate; } @keyframes rotate { /*0도 ->x축 -180도 회전 -> y축 -180도 회전 */ from {transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(120px) rotateX(-180deg) rotateY(0deg);} to {transform: perspective(120px) rotateX(-180deg) ro.. 11장 예제 - 애니메이션의 지점, 이름, 실행시간 적용하기 DOCTYPE html> 애니메이션의 지점, 이름, 실행시간 적용하기 #container { width:500px; margin:20px auto; } .box { width:100px; height:100px; float:left; margin:50px; } #box1 { background-color:#4cff00; /*연두색 박스*/ border:1px solid transparent; /*1px짜리 투명 테두리 */ animation-name:shape; /*애니메이션 지정*/ animation-duration: 3s; /*애니메이션 실행 시간 */ } #box2 { background-color:#8f06b0; /*보라색 박스*/ border:1px solid transparent; /*1px짜.. 11장 실습 1 DOCTYPE html> 마우스 오버하면 상품정보 표시하기 #container { width:1000px; margin:20px auto; } h1 { text-align:center; } .prod-list { list-style:none; padding:0; } .prod-list li { float: left; padding: 0; margin: 10px; overflow: hidden; position: relative; } .prod-list img { margin:0; padding:0; float:left; z-index:5; } .prod-list .caption { position: absolute; top:200px; /* 기준 위치보다 200px 아래로 */ width:300px; h.. 11장 예제 - 트랜지션 속성 한꺼번에 지정하기 DOCTYPE html> 트랜지션 속성 한꺼번에 지정하기 .box { margin:50px auto; width:100px; height:100px; background-color:#fb5; border:1px solid #222; transition:2s ease-in;/* 대상: all, 시간:2초, 함수:ease-in */ } .box:hover { /*여기에 있는 속성이 모두 트랜지션 대상*/ width:200px; height:200px; background-color:#f50; transform:rotate(270deg); } 11장 예제 - 트랜지션 대상과 진행 시간 진행하기 DOCTYPE html> 트랜지션 대상과 진행 시간 지정하기 .box { margin:20px auto; width:100px; height:100px; background-color:#07f; border: 1px solid black; transition-property: width,height; /*트랜지션 대상 - 너비, 높이*/ transition-duration:2s, 1s; /*트랜지션 시간 -2초 1초*/ } .box:hover { width:200px; height:120px; } 11장 예제- skew()함수를 텍스트 영역에 적용하기 DOCTYPE html> skew()함수를 텍스트 영역에 적용하기 #container { width:600px; margin: 20px auto; } h1 { width:500px; height:80px; background-color:#222; color:#fff; font-weight:bold; line-height:80px; text-align:center; transform:skewX(15deg); /*x축 기준으로 15도 비틀기 */ } CSS 변형 함수 익히기 이전 1 2 3 4 5 6 ··· 9 다음
