일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- IOS
- jQuery
- button
- keyframes
- javascript
- 풀스택
- MAC
- SWIFT
- image
- CSS
- effect
- iPhone
- 백엔드
- php
- 자바스크립트
- front-end
- css3
- 비전공자
- hover
- Animation
- 애니메이션
- 개발자
- 비전공 개발자
- 프론트엔드
- iOS 개발자
- ipad
- xcode
- HTML
- html5
- react
- Today
- Total
목록keyframes (13)
비전공자 개발일기
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #0C192C; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubbles { position: relative; display: flex; } .bubbles span { position: relative; width: 30px; height: 30px; background-color: #4FC3DC; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4FC3DC44, 0 ..
.scene { width: 230px; height: 200px; background:url('./background.jpg') 0 90% no-repeat; background-size: cover; background-size: 500% 400%; border-radius: 20%; position: relative; overflow: hidden; transition: background-position 15s linear; } .scene:hover { background-position: 150% 90%; } .mario { width: 65px; height: 100px; background: url("./mario_sprite.png") no-repeat; transform: transla..
.scene { width: 230px; height: 200px; position: relative; overflow: hidden; background-color: #2598eb; } .scene img { position: absolute; } .city { width: 100%; height: 50%; bottom: -3px; object-fit: cover; } .plane { width: 45%; top: 50px; left: -50px; animation: plane-move 15s linear forwards; } .cloud { animation: clouds-move 22s linear forwards; } .cloud-1 { width: 70px; top: 0; left: 30px; ..
.motion { width: 200px; height: 200px; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; } .circle { width: 100px; height: 100px; border: 1px solid #6667ab; position: absolute; border-radius: 50%; animation: circleAnimation 2s linear infinite; } .circle::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%)..
Learn More .button { display: inline-block; color: #3c67e3; text-decoration: none; padding: 20px 50px; border: 3px solid #3c67e3; border-radius: 10px; } .button:hover { animation: pulsate 1s ease-in-out; } @keyframes pulsate { 0% { box-shadow: 0 0 25px #5ddcff, 0 0 50px #4e00c2; } }