html+css
-
🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..
wave keyframes로 만들기🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..
2021.08.12 -
🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..
퍼포먼스 사이드 메뉴 html+scss🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..
2021.02.10