목록Animation (92)

비전공자 개발일기

Snow Animation

https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white); } @function random_range($min, $max) { $rand: random(); $random_range: $min + floor..
HTML _CSS 2022. 6. 2. 01:17
CSS Background Animation Effects

* { 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 ..
HTML _CSS 2022. 5. 30. 01:14
Isometric Cards

ROCKET Lorem ipsum dolor sit amet consectetur adipisicing elit. Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Code Lorem ipsum dolor sit amet consectetur adipisicing elit. * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f3f3f3; overflow: hidden; width: 1200px; margin: ..
HTML _CSS 2022. 5. 28. 01:06
Download Button Animation

Download Downloading Open File Download Downloading Open File .button.dark-single { --background: none; --rectangle: #242836; --success: #4bc793; } .button.white-single { --background: none; --rectangle: #f5f9ff; --arrow: #275efe; --success: #275efe; --shadow: rgba(10, 22, 50, .1); } .button.dark { --background: #242836; --rectangle: #1c212e; --arrow: #f5f9ff; --text: #f5f9ff; --success: #2f3545..
Javascript 2022. 5. 25. 00:14
Sprite Animation

.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..
HTML _CSS 2022. 5. 18. 00:13
3D BUTTON

Hover On Me *, *:after, *:before{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ font-size:100%; padding:100px; margin:0; height:100%; } body{ font-family:Arial, sans-serif; background:#000; } .container{ height:100%; position:relative; perspective:800px; } /* General button styles */ .btn{ border:none; position:relative; background:none; padding:30px 8..
HTML _CSS 2022. 5. 9. 00:33
Instagram Notification Animation

4 100 30 .notification-wrapper { width: fit-content; text-align: center; } .heart-icon { font-size: 20px; position: relative; } .heart-icon::after { content: " "; position: absolute; inset: 0 0 auto auto; width: 5px; height: 5px; background-color: #5f49ec; border: 2px solid #151515; border-radius: 50%; opacity: 0; transform: scale(0); transition: transform .5s linear, opacity .5s; } .notificatio..
HTML _CSS 2022. 5. 6. 00:24
Lock Animation

body { background-color: #000; height: 100vh; display: flex; justify-content: center; align-items: center; } .lock { position: relative; width: 50px; height: 50px; background-color: #000; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; border: 2px solid #fff; transition: all .8s; cursor: pointer; } .lock::after { position: absolute; conten..
Javascript 2022. 5. 5. 00:28
이전 Prev 1 ··· 6 7 8 9 10 11 12 Next 다음