일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Animation
- iOS 개발자
- ipad
- php
- 개발자
- HTML
- 프론트엔드
- 자바스크립트
- 풀스택
- 비전공 개발자
- CSS
- xcode
- 애니메이션
- button
- front-end
- image
- hover
- MAC
- effect
- 비전공자
- html5
- javascript
- IOS
- iPhone
- jQuery
- css3
- 백엔드
- SWIFT
- react
- keyframes
- Today
- Total
목록Animation (92)
비전공자 개발일기
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; background: rgb(238, 238, 238); } a#instagram { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; display: block; width: 144px; height: 144px; outline: none; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: ..
Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; jus..
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..
Avengers Assemble * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: radial-gradient(#93D9F9, #0C80B5); min-height: 100vh; overflow: hidden; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70vh; background-color: rgba(0, 0, 0, .1); } section { display: flex; justify-content: center; align-items: center; min-height: ..
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .wrapper { width: 200px; height: 200px; cursor: pointer; } .animated-mail { position: absolute; width: 200px; height: 150px; transition: .4s; } .animated-mail .body { position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 100px 200px; border-color: ..
It's Rainning body{ min-height: 100vh; font: 150%/1.1 'Gaegu', cursive; padding-top: calc(50vh - 4em); } body, .foggy, .container:before{ background: url('https://cdn.pixabay.com/photo/2015/09/09/21/31/rain-933490_960_720.jpg') 0 / cover fixed; } .container{ position: relative; margin: 0 auto; padding: 2em; max-width: 24em; background: hsla(0, 0%, 100%, 0.2) border-box; border-radius: 0.5em; box..
실제 동작 영상 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .elastic { width: 400px; height: 400px; display: flex; justify-content: center; align-items: flex-end; } .elastic::before { content: ''; position: absolute; bottom: 62.5px; left: 5px; width: 15px; height..
Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not c..