목록css3 (310)

비전공자 개발일기

BootStrap Progress bar

.progress .progress-bar{ -webkit-animation: progress 5s; /* Safari 4+ */ -moz-animation: progress 5s; /* Fx 5+ */ -o-animation: progress 5s; /* Opera 12+ */ animation: progress 5s; /* IE 10+ */ } @-webkit-keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } @-o-keyframes progress { 0% { width: 0%; } 100% { width: 100%..
HTML _CSS 2023. 2. 28. 20:43
Universe Loading

/* 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..
HTML _CSS 2023. 2. 27. 20:13
Glitchy Loading Indicator

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..
Javascript 2023. 2. 26. 01:32
To Do List

to do list Add Insert a new task @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap"); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; user-select: none; } html, body { width: 100%; height: 100%; } a { text-decoration: none; color: inherit; } body { displa..
Javascript 2023. 2. 25. 22:28
Text Animation

CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #222; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .box { position: relative; display: flex; flex-direction: column; } .box h2 { font..
HTML _CSS 2023. 2. 24. 23:11
Wandering cube Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #333; display: flex; justify-content: center; align-items: center; } .wandering-cubes { width: 4em; height: 4em; position: relative; margin: auto; } .wandering-cubes .cube { background-color: #229ABC; width: 2em; height: 2em; position: absolute; top: 0; left: 0; animation: wandering-cubes 1.8s ease-i..
HTML _CSS 2023. 2. 23. 20:14
Apple iMessage

Text Soap An iMessage chat becomes fodder for daytime drama This begins one morning with my friend in San Diego telling me about an earthquake they just had. It was loud. We just laid there and said “is this an earthquake? I think this is an earthquake.” Like is this an earthquake just go back to sleep It’s more like “this is an earthquake. Check the Internet. Yup. Earthquake. This is the size. ..
HTML _CSS 2023. 2. 22. 21:24
HTML dialog tag

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog : The Dialog element - HTML: HyperText Markup Language | MDN The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. developer.mozilla.org Favorite animal: Choose… Brine shrimp Red panda Spider monkey Cancel Confirm Show the dialog const showButton = document.ge..
HTML _CSS 2023. 2. 20. 21:14
이전 Prev 1 2 3 4 ··· 39 Next 다음