일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- php
- 풀스택
- effect
- 자바스크립트
- Animation
- keyframes
- javascript
- iOS 개발자
- MAC
- xcode
- 프론트엔드
- html5
- image
- iPhone
- button
- hover
- IOS
- 비전공자
- ipad
- jQuery
- 백엔드
- CSS
- 애니메이션
- react
- 개발자
- 비전공 개발자
- SWIFT
- front-end
- HTML
- css3
- Today
- Total
목록Animation (92)
비전공자 개발일기
♠ POKER ♣ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } h2 { position: relative; font-size: 6em; color: #222; } h2::before { content: attr(data-text); position: absolute; color: #FFF; width: 350px; overflow: hidden; white-space: nowrap; border-right: 4px solid #FFF; filter: dro..
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .bubble { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 25px rgba(255, 255, 255, .25); animation: animate 8s ease-in-out infinite; } .bubble:nth-child(2) { position: relative; zoom: .45; ..
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #181C1F; } .container { position: relative; height: 400px; border-bottom: 2px solid #FFF; } .cloud { position: relative; top: 50px; width: 320px; height: 100px; background-color: #FFF; border-radius: 100px; } .cloud::before { content: ""; p..
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; filter: drop-shadow(0 0 15px rgba(0, 0, 0, .6)); animation: fadeInOut 1s linear infinite } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } span::before { content: ''; position: absolute; width: 100%;..
* { margin: 0; padding: 0; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; background-color: #F00; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; } span::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #FFF; animation: moveParticles 2s linear infinite; } @keyframes ..
Simple CSS Waves @import url(//fonts.googleapis.com/css?family=Lato:300:400); body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position:relative; text-align:center; background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172..
AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-h..
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #607D8B; } .container { position: relative; top: 50px; } .plate { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 500px; height: 200px; background: linear-gradient(to right, #F9F9F9F9, #E7E7E7); border-radi..