CSS44 사이트유형 - 배너유형2 배너 유형2 이번 배너유형은 position을 이용해 이미지 파일의 구간을 설정했습니다. 1.HTML 코드 코드 보기 배너 영역 오늘은 좋아! 오늘날씨는 너무 좋아요! 제블로그!. 구독과 좋아요! 부탁드립니다. 바로가기 2.CSS 코드 코드 보기 /* fonts */ @import url("https://webfontworld.github.io/gmarket/GmarketSans.css"); .gmark { font-family: "GmarketSans"; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, .. 2022. 9. 29. css애니메이션 - 다보고있다~ 애니메이션 : 다보고있다~ See the Pen cssani8 by hmm365 (@hmm365) on CodePen. css 코드보기 *{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ height: 100%; overflow: hidden; } .wrapper{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; perspective: 600px; } .me{ position: absolute; width: 369px; height: 547px; tran.. 2022. 9. 27. css애니메이션 - 로딩중~ 애니메이션 : 로딩중~ See the Pen anicss7 by hmm365 (@hmm365) on CodePen. css 코드보기 body { background-color: rgb(14,43,122); } .loader { position: absolute; top: 50%; left: 50%; transform : translate(-50%,-50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform : translate(-50%,-50%); height: 100%; animation: spin 1s infi.. 2022. 9. 27. css애니메이션 - 움직이는 박스 div class="document"> See the Pen cssani6 by hmm365 (@hmm365) on CodePen. 애니메이션 : 움직이는 박스 body { background-color: #666; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotate 8000ms linear .. 2022. 9. 27. css애니메이션 - 통통튀는 글자 애니메이션 : 통통튀는 글자 See the Pen cssani5 by hmm365 (@hmm365) on CodePen. html,body{ width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, purple 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: axis-pan; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block; -webkit-font-smoothing: anti.. 2022. 9. 27. Animation - 움직이는 사진 애니메이션 만들기 애니메이션 : 움직이는 사진 움직이는 사진을 만들어 봅시다. @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.woff2') forma.. 2022. 9. 20. 이전 1 2 3 4 ··· 8 다음 728x90 반응형
