목록Animation (92)

비전공자 개발일기

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
Toolbar Motion

:root { --primary-color:#0D6FFA; --accent-color:#49CE95; --danger-color:#EC3582; --fore-color:rgba(0,0,0,0.65); --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12); } body { background-color:#9664A5; } .sc-bottom-bar { position:absolute; display:flex; padding: 16px 36px; justify-content:space-between; width:375px; margin:auto; top:0; left:0; bottom:0; right:0; h..
HTML _CSS 2023. 2. 19. 19:16
Moving Car Animation

*{ padding: 0; margin: 0; box-sizing: border-box; } :root{ --color-car-body:#f06043; --color-bg-1:#e4ffff; } html{ height: 100%; } body{ background-image: linear-gradient(to top,#88d6e7 30%,#e4ffff 20%); overflow: hidden; } .car{ position: absolute; top: 70%; left: 50%; transform: translate(-50%,-100%); transform-origin: 25% bottom; animation: start-car 2.5s 1.1s; z-index: 100; } .car__top{ marg..
HTML _CSS 2023. 2. 15. 00:16
Simple 404 page

There's some issues Marvel Hope you success our mission as our team thank you see again 4 0 4 Visit the home page @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700"); @import url("https://fonts.googleapis.com/css?family=Catamaran:400,800"); .error-container { text-align: center; font-size: 180px; font-family: "Catamaran", sans-serif; font-weight: 800; margin: 20px 15px;..
HTML _CSS 2023. 2. 13. 00:57
Animated Gaming Website

* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } section { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; } header { position: absolute; top: 0; width: 100%; padding: 30px; display: flex; justify-content: space-between; align-items: center; } header .logo img { position: relative; max-width: 200px; } header i { font-size: 1.5em;..
HTML _CSS 2023. 2. 12. 00:21
Neon Love

body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Initialize the GL context var gl = canvas.getContext("webgl"); if (!gl) { console.error("Unable to initialize WebGL."); } //Time var time = 0.0; //************** Shader sources ********..
HTML _CSS 2023. 2. 10. 00:09
Confetti Text Effect

OLLEH!!! body { height: 100vh; display: grid; place-items: center; font-family: "bebas", sans-serif; background-color: #000; } .particletext { text-align: center; font-size: 48px; position: relative; color: #fff; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti..
HTML _CSS 2023. 2. 9. 23:17
이전 Prev 1 2 3 4 ··· 12 Next 다음