본문 바로가기

코드펜4

[CSS] 마우스를 따라가는 눈알 효과 만들기👀 마우스를 따라가는 눈알 효과 만들기👀 이번 포스팅에서는 마우스 커서 위치를 따라가는 눈알 효과를 만들어보도록 하겠습니다. HTML 코드 wrapper 클래스값을 가진 div 안에 card 클래스값 div를 만든 후, 그 card div 안에는 me와 text 클래스값을 가진 div를 생성합니다. text div 안에는 넣고 싶은 짧은 문구를 넣습니다. me 안에는 eye 클래스값 div를 넣습니다. HELLO CSS 코드 HTML에서 만들어두었던 div의 클래스값들을 이곳에 정의하여 디자인합니다. .me::before, .me::after에서 background url 방식으로 얼굴을 출력시키고, .eye, .eye::before에서는 움직여줄 눈알을 출력시켜주도록 합니다. 코드 펼쳐보기 * { marg.. 2022. 9. 26.

[CSS] 로딩 애니메이션 만들기 로딩 애니메이션 만들기 이번 포스팅에서는 로딩 애니메이션을 만들어보도록 하겠습니다. HTML 코드 loader 클래스값을 가진 div 안에 ball 클래스값 div를 10개를 만들어주도록 한다. CSS 코드 ball 클래스를 지닌 div의 형태를 만들어 준 다음 nth-child를 이용하여 애니메이션 딜레이를 주고 마지막으로 키프레임을 통해 본격적으로 움직임을 주도록 한다. body { background-color: #b38dff; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite r.. 2022. 9. 25.

[CSS] 움직이는 육면체 애니메이션🎲 움직이는 육면체 애니메이션🎲 이번 포스팅에서는 움직이는 육면체 애니메이션을 만들어보도록 하겠습니다! HTML 코드 cube클래스를 가진 div 태그 안에 div 박스를 6개 만들고 첫번째 div 박스에 글자를 넣습니다. 코딩공책 CSS 코드 body { background-color: #999; 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) tr.. 2022. 9. 22.

[CSS] 통통 튀는 글자 효과🐰 통통 튀는 글자 효과🐰 이번 포스팅에서는 통통 튀는 글자 효과를 만들어보도록 하겠습니다! HTML 코드 h1 태그 안에 쓰고 싶은 글자 수만큼의 span 태그를 만든 다음 글자를 채워 넣는다. 코 딩 공 책 ★ 티 스 토 리 CSS 코드 @import url('https://webfontworld.github.io/crown/CrownMychew.css'); html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { f.. 2022. 9. 22.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바