일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- IOS
- jQuery
- html5
- 비전공 개발자
- xcode
- CSS
- iOS 개발자
- keyframes
- 비전공자
- 애니메이션
- image
- 풀스택
- php
- 프론트엔드
- button
- react
- javascript
- MAC
- front-end
- 백엔드
- css3
- 개발자
- effect
- SWIFT
- 자바스크립트
- hover
- iPhone
- Animation
- HTML
- ipad
- Today
- Total
목록Loading (11)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cZTpzH/btr0JNHplKd/3K3q4ldHyL65MA3Jv74s9k/img.png)
/* KEYFRAMES */ @keyframes spin { from { transform: rotate(0); } to{ transform: rotate(359deg); } } @keyframes spin3D { from { transform: rotate3d(.5,.5,.5, 360deg); } to{ transform: rotate3d(0deg); } } @keyframes configure-clockwise { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360d..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lTh1t/btr0NM7X134/DVuVc2eyAwnnXICpF8zCR0/img.png)
LOADING... @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400); html, body { height: 100%; } body { background: radial-gradient(#222922, #000500); font-family: 'Source Code Pro', monospace; font-weight: 400; overflow: hidden; padding: 30px 0 0 30px; text-align: center; } .word { bottom: 0; color: #fff; font-size: 2.5em; height: 2.5em; left: 0; line-height: 2.5em; margin: aut..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/3GcZV/btrYARwKOVO/HKNjA0Has8eFHzklUkqe1k/img.png)
Send Message body { display: grid; place-items: center; height: 100vh; background: #000; } .btn { background: #49D75C; border: none; outline: none; cursor: pointer; border-radius: 35px; font-size: 1rem; font-weight: bold; color: #FFF; display: grid; place-items: center; transition: all 0.25s ease; position: relative; width: 210px; height: 60px; overflow: hidden; } .btn i { font-size: 1.45rem; po..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bdpnZ4/btrXc8V0L38/gksydspvTK7kf06BBKW8gk/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .loader { width: 32px; height: 72px; display: inline-block; position: relative; border: 2px solid #FFF; animation: fill 2s linear infinite alternate; color: #2598EB; border-radius: 0 0 4px 4px; transform: perspective(140px) rotateX(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpB94q/btrW1N3SmYW/fpcKOAI26TsDtxRIUVIv71/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; } .pac-man { border-radius: 100em 100em 0 0 ; transform-origin: bottom; animation: easing-top .5s infinite; } .pac-man, .pac-man::before { width: 70px; height: calc(70px / 2); background-color: #FED75A; } .pac-man::before { content: "..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BWVhl/btrWUHXK7uL/MBTuQaFlZFsiKGUWGKU0y1/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .loader { position: relative; width: 60px; height: 60px; display: inline-block; background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b5QdZh/btrV1gy3hJh/9Qe7euTREuctgkHajU6CPk/img.png)
html { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background: linear-gradient(45deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { display: grid; grid-template-columns: 28% 70%; grid-gap: 2%; background-color..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mR159/btrLuBHJUoh/96RWrXymb597Mq2qDvwKD1/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; gap: 50px; } .loader { position: relative; width: 300px; height: 300px; background-color: #333; border-radius: 50%; box-shadow: 25px 25px 75px rgba(0, 0, 0, .25), 10px 10px 70px rgba(0, 0, 0, .25); border: 2px solid #222; display: fle..