Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
* { box-sizing: border-box; } #overlay { background: #f0f0f0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { border-radius: 50%; } .bg { width: 300px; height: 300px; background: #000; border: solid 5px #0088ff; } .outermost { width: 255px; height: 255px; border: solid 10px rgba(0, 0, 0, 0); border-bottom: solid 10px #0088ff; border-left: solid 10px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 5s linear infinite; } .outer { width: 250px; height: 250px; border: solid 5px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .middle { width: 215px; height: 215px; border: solid 12px rgba(0, 0, 0, 0); border-bottom: solid 12px #005aa8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin2 3.5s linear infinite reverse; } .middle2 { width: 215px; height: 215px; border: solid 6px rgba(0, 0, 0, 0); border-top: solid 6px #005aa8; border-right: solid 6px #005aa8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 3.5s linear infinite reverse; } .middle3 { width: 205px; height: 205px; border: solid 30px rgba(0, 0, 0, 0); border-top: solid 30px #0088ff4b; border-right: solid 30px #0088ff4b; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 3.5s linear infinite reverse; } .inner { width: 140px; height: 140px; border: solid 5px #0088ff; border-bottom: solid 5px rgba(0, 0, 0, 0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); animation: spin2 2s linear infinite; } .innermost3 { width: 35px; height: 35px; background: #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .innermost2 { width: 80px; height: 80px; border: solid 13px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .innermost { width: 115px; height: 115px; border: solid 13px #0088ff; border-top: solid 13px rgba(0, 0, 0, 0); border-bottom: solid 13px rgba(0, 0, 0, 0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 1s linear infinite reverse; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin2 { 0% { transform: translate(-50%, -50%) rotate(45deg); } 100% { transform: translate(-50%, -50%) rotate(405deg); } }
24
J.A.R.V.I.S Animation
By:
rald_dev
.back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-count: infinite; } .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate(-45deg); animation-name: beat; animation-duration: 1s; animation-iteration-count: infinite; } .heart::after { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0px; left: 25px; } .heart::before { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; } @keyframes backdiv { 50% { background: #ffe6f2; } } @keyframes beat { 0% { transform: scale(1) rotate(-45deg); } 50% { transform: scale(0.6) rotate(-45deg); } }
24
Heart animation
By:
rald_dev
Neon button
Neon button
Neon button
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #050801; font-family: 'Raleway', sans-serif; font-weight: bold; } a{ position: relative; display: inline-block; padding: 25px 30px; margin: 40px 0; color: #03e9f4; text-decoration: none; text-transform: uppercase; transition: 0.5s; letter-spacing: 4px; overflow: hidden; margin-right: 50px; } a:hover{ background: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); } a:nth-child(1){ filter: hue-rotate(270deg); } a:nth-child(2){ filter: hue-rotate(110deg); } a span{ position: absolute; display: block; } a span:nth-child(1){ top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#03e9f4); animation: animate1 1s linear infinite; } @keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; } } a span:nth-child(2){ top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg,transparent,#03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @keyframes animate2{ 0%{ top: -100%; } 50%,100%{ top: 100%; } } a span:nth-child(3){ bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(270deg,transparent,#03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.50s; } @keyframes animate3{ 0%{ right: -100%; } 50%,100%{ right: 100%; } } a span:nth-child(4){ bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg,transparent,#03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate4{ 0%{ bottom: -100%; } 50%,100%{ bottom: 100%; } }
24
Glowing buttons
By:
rald_dev
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: #29a329; } .container{ margin-top: 100px; width: 400px; height: 400px; position: relative; border-radius: 50%; animation: draw 5s linear infinite; } .trace{ position: absolute; width: 390px; height:390px; border-radius: 50%; border: 10px solid #fff; border-right: 10px solid transparent; border-bottom: 10px solid transparent; transform: rotate(-45deg); } .pencil{ position: absolute; height: 100%; width: 82px; /*background: green;*/ left: 41%; } .rubber{ width: 82px; height: 50px; background: violet; border-radius:15px 15px 0 0 ; margin-top: -6px; } .joint{ width: 82px; height: 60px; background: black; } .stick{ height: 58%; background: linear-gradient(to right, #cccc00 27px, #1a75ff 0 55px, #cc0066 20px); } .pencil-top{ height: 64px; background: black; clip-path: polygon(0 0, 50% 100%, 100% 0); } .pencil-tip{ background: #fff; height: 20px; clip-path: polygon(35% 0, 50% 100%, 64.5% 0); margin-top: -19px; } @keyframes draw{ 0%{ transform: rotate(360deg); } 100%{ transform: rotate(0deg); } }
24
Pencil animation
By:
rald_dev
body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #6a3be4; } .container { position: relative; } .progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-style: solid; border-color: #c1edff; border-width: 2px; border-radius: 50px; width: 250px; height: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, .2); animation: progress 3s infinite linear; } .ball { position: absolute; height: 42px; width: 42px; background-color: #02a9f4; border-radius: 50%; top: 4px; left: 4px; animation: ball 1.5s ease-in-out alternate infinite; } @keyframes progress { to {transform: translate(-50%, -50%) rotate(360deg);} } @keyframes ball { to {left: 204px;} }
24
Bouncing ball v3
By:
rald_dev
* { margin:0; padding:0; box-sizing:border-box; } body { background-color:#0dc5c1; } .line_height { width:10px; height:50px; background-color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:move 04s linear infinite; animation-delay:-0.16s; } .line_height:before, .line_height:after { content:""; position:absolute; width:10px; height:50px; background-color:#fff; animation:move 04s ease-in-out infinite; } .line_height:before { left:-25px; animation-delay:-0.32s; } .line_height:after { left:25px; } @keyframes move { 0%,80%,100% { height:48px; box-shadow:0 0; } 40% { height:60px; box-shadow:0 -24px; } }
24
Line Animation
By:
rald_dev
When I just noticed, it was love.
html, body { background: linear-gradient(to top right, #9c27b0, #ec407a); height: 100%; margin: 0px; padding: 0px; } h1 { font-family: 'Barrio', cursive; text-align: center; color: #fff; margin:0px; padding-top: 50px; } .centerHeart { display: flex; justify-content: center; align-items: center; } .heart { background: #fff; width: 100px; height: 100px; top: 100px; position: relative; border-radius: 0 0 10px 0; transform: rotate(45deg); animation: pulse .7s infinite alternate; } .heart::before, .heart::after { content: ""; background: #fff; width: 100px; height: 100px; border-radius: 50%; position: absolute; } .heart::before { top:-50px; } .heart::after { left:-50px; } @keyframes pulse { 50% { transform: rotate(45deg) scale(1.2); } }
24
Pulsating heart
By:
rald_dev
body { background: #222; } .box { background-color: #61ab20; margin: 0 auto; width: 500px; height: 300px; position: relative; box-shadow: inset 0 0 3px #000; border-radius: 5px; border: 1px solid #111; overflow: hidden; } .box b { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #3673cf; box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04); position: absolute; -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; } @-webkit-keyframes moveX { from { left: 0; } to { left: 480px; } } @-moz-keyframes moveX { from { left: 0; } to { left: 480px; } } @-o-keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveX { from { left: 0; } to { left: 480px; } } @-webkit-keyframes moveY { from { top: 0; } to { top: 280px; } } @-moz-keyframes moveY { from { top: 0; } to { top: 280px; } } @-o-keyframes moveY { from { top: 0; } to { top: 280px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } }
24
CSS Bouncing Ball
By:
rald_dev
* { margin: 0; padding: 0; } body { background: #262626; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .down { position: relative; width: 50px; height: 80px; border-radius: 25px; background: transparent; border: 2px solid #fff; overflow: hidden; } .down:before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; left: 50%; top: 10px; transform: translate(-50%, 0); animation: animate 1s linear infinite; } .down:after { content: ''; position: absolute; width: 6px; height: 15px; border-radius: 50%; background: #fff; left: 50%; top: 5px; transform: translate(-50%, 0); border-radius: 3px; } @keyframes animate { 0% { transform: translate(-50%, 0px); opacity: 0; } 50% { transform: translate(-50%, 40px); opacity: 1; } 100% { transform: translate(-50%, 80px); opacity: 0; } }
24
Mouse Scroll Down Animation
By:
rald_dev
Loading...
@keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation .5s infinite; -moz-animation: flickerAnimation .5s infinite; -o-animation: flickerAnimation .5s infinite; animation: flickerAnimation .5s infinite; }
24
Flickering Animation
By:
rald_dev
html, body { width: 100%; height: 100%; background-color: #333; } .c-scrolldown { width: 1px; height: 60px; position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto; overflow: hidden; } .c-scrolldown .c-line { width: 100%; height: 100%; display: block; background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 -60px; background-size: 100% 200%; animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; } @keyframes scrolldown { 0% { background-position: 0 -60px; } 75% { background-position: 0 0; } 100% { background-position: 0 60px; } }
24
scroll down line animation
By:
rald_dev
#square { width: 100px; height: 100px; background: red; -webkit-animation: super-rainbow 15s infinite alternate linear; -moz-animation: super-rainbow 15s infinite alternate linear; } @-webkit-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } @-moz-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } }
23
Rainbow Box
By:
rald_dev
Previous
1
…
5
6
7
8
9
…
16
Next