Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
body{ -webkit-filter: brightness(1.2) contrast(20); background:#000; } .father-div{ width: 50%; height:500px; margin: 0 auto; padding-top:200px; background-color: #000; padding-left:40%; -webkit-filter: blur(20px) } .cat{ background: #FFF; width: 150px; height: 150px; border-radius: 250px; -webkit-animation: right 15s infinite; } @-webkit-keyframes right { 0%,100% { margin-left: 100px } 50% { margin-left: -100px } } .dog{ background: #FFF; width: 150px; height: 150px; border-radius: 250px; -webkit-animation: lefty 5s infinite; position:relative; z-index:4; } @-webkit-keyframes lefty { 0%,100% { margin-left: -250px } 50% { margin-left: -50px } }
17
Bubble Effect
By:
pixeldev
Animated Weather Icons
html { box-sizing: border-box; } html *, html *:before, html *:after { box-sizing: inherit; } body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; font-family: 'Roboto', sans-serif; text-align: center; background-color: currentColor; } h1 { margin-bottom: 1.375em; color: #fff; font-weight: 100; font-size: 2em; text-transform: uppercase; } p, a { color: rgba(255,255,255,0.3); font-size: small; } p { margin: 1.375rem 0; } .icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */ } .cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .cloud:nth-child(2):after { background: #fff; } .sun { position: absolute; top: 50%; left: 50%; width: 2.5em; height: 2.5em; margin: -1.25em; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375em #fff; animation: spin 12s infinite linear; } .rays { position: absolute; top: -2em; left: 50%; display: block; width: 0.375em; height: 1.125em; margin-left: -0.1875em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff; } .rays:before, .rays:after { content: ''; position: absolute; top: 0em; left: 0em; display: block; width: 0.375em; height: 1.125em; transform: rotate(60deg); transform-origin: 50% 3.25em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff; } .rays:before { transform: rotate(120deg); } .cloud + .sun { margin: -2em 1em; } .rain, .lightning, .snow { position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor; } .rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; } .bolt { position: absolute; top: 50%; left: 50%; margin: -0.25em 0 0 -0.125em; color: #fff; opacity: 0.3; animation: lightning 2s linear infinite; } .bolt:nth-child(2) { width: 0.5em; height: 0.25em; margin: -1.75em 0 0 -1.875em; transform: translate(2.5em, 2.25em); opacity: 0.2; animation: lightning 1.5s linear infinite; } .bolt:before, .bolt:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -1.625em 0 0 -1.0125em; border-top: 1.25em solid transparent; border-right: 0.75em solid; border-bottom: 0.75em solid; border-left: 0.5em solid transparent; transform: skewX(-10deg); } .bolt:after { margin: -0.25em 0 0 -0.25em; border-top: 0.75em solid; border-right: 0.5em solid transparent; border-bottom: 1.25em solid transparent; border-left: 0.75em solid; transform: skewX(-10deg); } .bolt:nth-child(2):before { margin: -0.75em 0 0 -0.5em; border-top: 0.625em solid transparent; border-right: 0.375em solid; border-bottom: 0.375em solid; border-left: 0.25em solid transparent; } .bolt:nth-child(2):after { margin: -0.125em 0 0 -0.125em; border-top: 0.375em solid; border-right: 0.25em solid transparent; border-bottom: 0.625em solid transparent; border-left: 0.375em solid; } .flake:before, .flake:after { content: '\2744'; position: absolute; top: 50%; left: 50%; margin: -1.025em 0 0 -1.0125em; color: #fff; list-height: 1em; opacity: 0.2; animation: spin 8s linear infinite reverse; } .flake:after { margin: 0.125em 0 0 -1em; font-size: 1.5em; opacity: 0.4; animation: spin 14s linear infinite; } .flake:nth-child(2):before { margin: -0.5em 0 0 0.25em; font-size: 1.25em; opacity: 0.2; animation: spin 10s linear infinite; } .flake:nth-child(2):after { margin: 0.375em 0 0 0.125em; font-size: 2em; opacity: 0.4; animation: spin 16s linear infinite reverse; } /* Animations */ @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; transform: scale(0.5) translate(-200%, -3em); } } @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } } @keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; } }
17
Animated Weather Icons
By:
pixeldev
Home
About
Contact
Dance
nav { background: #0e1238; font-family: "Bowlby One SC", no-serif; overflow: hidden; } ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh; list-style: none; } li { position: relative; } a { color: #e8984c; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-decoration: none; position: relative; font-size: calc(1rem + 6vw); } li:last-child:after, li:last-child:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; clip-path: circle(0); opacity: 0; transform: translate3d(-50%, -50%, 0); transition: opacity 1s, clip-path 1s, transform 1s 1s; } li:last-child:after { background: white; mix-blend-mode: exclusion; } li:last-child:before { background: #55b992; -webkit-clip-path: circle(0); mix-blend-mode: color-dodge; } li:hover ~ li:last-child:after, li:last-child:hover:after, li:hover ~ li:last-child:before, li:last-child:hover:before { opacity: 1; transition: 1s ease; } li:first-child:hover ~ li:last-child:after { transform: translate3d(-100%, -100%, 0); clip-path: circle(7.5vw); } li:first-child:hover ~ li:last-child:before { transform: translate3d(-115%, -110%, 0); clip-path: circle(5vw); } li:nth-child(2):hover ~ li:last-child:after { transform: translate3d(-10%, -105%, 0); clip-path: circle(3vw); } li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(0%, -100%, 0); clip-path: circle(4.5vw); } li:nth-child(3):hover ~ li:last-child:after { transform: translate3d(-95%, 0%, 0); clip-path: circle(6.5vw); } li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(-105%, 10%, 0); clip-path: circle(6.5vw); } li:last-child:hover:after { transform: translate3d(-5%, 0%, 0); clip-path: circle(5.5vw); } li:last-child:hover:before { transform: translate3d(4%, 0%, 0); clip-path: circle(4.5vw); } @media (max-width: 30em) { nav a { font-size: 4rem; } ul { display: flex; flex-direction: column; height: 100vh; } li { flex: 1; } li:last-child:after, li:last-child:before { transform: translate3d(0%, -150%, 0); } li:first-child:hover ~ li:last-child:after { transform: translate3d(0, -300%, 0); clip-path: circle(11vh); } li:first-child:hover ~ li:last-child:before { transform: translate3d(10%, -290%, 0); clip-path: circle(9vh); } li:nth-child(2):hover ~ li:last-child:after { transform: translate3d(0%, -200%, 0); clip-path: circle(6vh); } li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(10%, -195%, 0); clip-path: circle(7vh); } li:nth-child(3):hover ~ li:last-child:after { transform: translate3d(0, -100%, 0); clip-path: circle(8vh); } li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(-10%, -100%, 0); clip-path: circle(4vh); } li:last-child:hover:after { transform: translate3d(0%, 0%, 0); clip-path: circle(8vh); } li:last-child:hover:before { transform: translate3d(20%, 0%, 0); clip-path: circle(6vh); } }
17
Direction-Aware Hover Effect
By:
pixeldev
body{ background:black; } .container{ margin:80px auto; width: 60px; height: 60px; position:relative; transform-origin:center bottom; animation-name: flicker; animation-duration:3ms; animation-delay:200ms; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: alternate; } .flame{ bottom:0; position:absolute; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-top-left-radius: 50%; transform:rotate(-45deg) scale(1.5,1.5); } .yellow{ left:15px; width: 30px; height: 30px; background:gold; box-shadow: 0px 0px 9px 4px gold; } .orange{ left:10px; width: 40px; height: 40px; background:orange; box-shadow: 0px 0px 9px 4px orange; } .red{ left:5px; width: 50px; height: 50px; background:OrangeRed; box-shadow: 0px 0px 5px 4px OrangeRed; } .white{ left:15px; bottom:-4px; width: 30px; height: 30px; background:white; box-shadow: 0px 0px 9px 4px white; } .circle{ border-radius: 50%; position:absolute; } .blue{ width: 10px; height: 10px; left:25px; bottom:-25px; background: SlateBlue; box-shadow: 0px 0px 15px 10px SlateBlue; } .black{ width: 40px; height: 40px; left:10px; bottom:-60px; background: black; box-shadow: 0px 0px 15px 10px black; } @keyframes flicker{ 0% {transform: rotate(-1deg);} 20% {transform: rotate(1deg);} 40% {transform: rotate(-1deg);} 60% {transform: rotate(1deg) scaleY(1.04);} 80% {transform: rotate(-2deg) scaleY(0.92);} 100% {transform: rotate(1deg);} }
16
Flame Animation
By:
pixeldev
body { background: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; padding: 0; } .container { background: #181c21; width: 100%; height: 100%; margin: 0; display: flex; align-items: stretch; justify-content: stretch; } .loader { width: 45px; height: 90px; position: relative; } .loader:after { content: ""; position: absolute; inset: 0 0 20px; border-radius: 15px 15px 10px 10px; padding: 1px; background: repeating-linear-gradient(-45deg, #91d2e2 0 8px, #1296a7 0 12px) content-box; --c: radial-gradient(farthest-side, #000 94%, #0000); -webkit-mask: linear-gradient(#0000 0 0), var(--c) -10px -10px, var(--c) 15px -14px, var(--c) 9px -6px, var(--c) -12px 9px, var(--c) 14px 9px, var(--c) 23px 27px, var(--c) -8px 35px, var(--c) 50% 50%, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0), var(--c) -10px -10px, var(--c) 15px -14px, var(--c) 9px -6px, var(--c) -12px 9px, var(--c) 14px 9px, var(--c) 23px 27px, var(--c) -8px 35px, var(--c) 50% 50%, linear-gradient(#0000 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude, add, add, add, add, add, add, add, add; -webkit-mask-repeat: no-repeat; animation: l2 3s infinite ease-out; } .loader:before { content: ""; position: absolute; inset: 50% calc(50% - 4px) 0; background: #e0a267; border-radius: 50px; } @keyframes l2 { 0% { -webkit-mask-size: auto, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 10% { -webkit-mask-size: auto, 25px 25px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 20% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 30% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 0 0, 0 0, 0 0, 0 0, 0 0; } 40% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 0 0, 0 0, 0 0, 0 0; } 50% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 0 0, 0 0, 0 0; } 60% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 0 0, 0 0; } 70% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 25px 25px, 0 0; } 80%, 100% { -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 25px 25px, 200% 200%; } }
15
Popsicle Loader
By:
pixeldev
.loader-container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .traffic-light { background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 40%, #1e1e1e 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px; padding: 24px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 20px rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px) saturate(180%); position: relative; width: 100px; } .light-row { margin: 18px 0; display: flex; align-items: center; justify-content: center; position: relative; } .light-row:first-child { margin-top: 0; } .light-row:last-child { margin-bottom: 0; } .light { width: 40px; height: 40px; border-radius: 50%; position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.06); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .light::before { content: ""; position: absolute; top: 16px; left: 20px; width: 28px; height: 24px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60% ); border-radius: 50%; filter: blur(6px); opacity: 0.4; } .light::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle at 35% 35%, rgba(255, 255, 255, 0.08) 0%, transparent 65% ); } .red-light { background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%), linear-gradient(135deg, #331212, #1a0606); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); animation: redSequence 4s ease-in-out infinite; } @keyframes redSequence { 0% { background: radial-gradient(circle at center, #ff4444 0%, #cc1111 80%), linear-gradient(135deg, #ff5555, #dd2222); border-color: rgba(255, 68, 68, 0.25); box-shadow: 0 0 40px rgba(255, 68, 68, 0.6), 0 0 80px rgba(255, 68, 68, 0.3), 0 0 120px rgba(255, 68, 68, 0.15), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.4); transform: scale(1.05); } 25%, 75%, 100% { background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%), linear-gradient(135deg, #331212, #1a0606); border-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); transform: scale(1); } } .yellow-light { background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%), linear-gradient(135deg, #333312, #1a1a06); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); animation: yellowSequence 4s ease-in-out infinite; } @keyframes yellowSequence { 0%, 50%, 100% { background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%), linear-gradient(135deg, #333312, #1a1a06); border-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); transform: scale(1); } 25% { background: radial-gradient(circle at center, #ffdd44 0%, #cc9900 80%), linear-gradient(135deg, #ffee55, #ddaa22); border-color: rgba(255, 221, 68, 0.25); box-shadow: 0 0 40px rgba(255, 221, 68, 0.6), 0 0 80px rgba(255, 221, 68, 0.3), 0 0 120px rgba(255, 221, 68, 0.15), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.4); transform: scale(1.05); } } .green-light { background: radial-gradient(circle at center, #152d15 0%, #081a08 80%), linear-gradient(135deg, #123312, #061a06); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); animation: greenSequence 4s ease-in-out infinite; } @keyframes greenSequence { 0%, 25%, 75% { background: radial-gradient(circle at center, #152d15 0%, #081a08 80%), linear-gradient(135deg, #123312, #061a06); border-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(255, 255, 255, 0.02); transform: scale(1); } 50%, 100% { background: radial-gradient(circle at center, #44ff44 0%, #11cc11 80%), linear-gradient(135deg, #55ff55, #22dd22); border-color: rgba(68, 255, 68, 0.25); box-shadow: 0 0 40px rgba(68, 255, 68, 0.6), 0 0 80px rgba(68, 255, 68, 0.3), 0 0 120px rgba(68, 255, 68, 0.15), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.4); transform: scale(1.05); } } .loading-status { font-size: 12px; color: #0317fc; font-weight: 500; letter-spacing: 0.5px; animation: statusUpdate 4s ease-in-out infinite; } .loading-status::before { content: "Initializing red signal..."; animation: textUpdate 4s ease-in-out infinite; } @keyframes textUpdate { 0%, 24% { content: "Initializing red signal..."; } 25%, 49% { content: "Preparing yellow transition..."; } 50%, 74% { content: "Activating green protocol..."; } 75%, 100% { content: "Completing traffic sequence..."; } } @keyframes statusUpdate { 0%, 100% { opacity: 1; } 12.5%, 37.5%, 62.5%, 87.5% { opacity: 0.5; } }
15
Traffic Light Loader Animation
By:
pixeldev
Previous
1
…
22
23
24