Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
html { box-sizing: border-box !important; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html, body { width: 100%; height: 100%; } body { background: #333; color: #fff; font-size: 22px; font-weight: normal; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 1.5; display: flex; justify-content: center; align-items: center; } .charging-container { max-width: 150px; width: 100%; height: 60px; border: 4px solid rgb(236, 39, 72); border-radius: 5px; position: relative; cursor: pointer; } .charging-container::before { content: ''; position: absolute; width: 8px; height: 16px; background: rgb(236, 39, 72); right: -9px; top: 50%; margin-top: -8px; border-radius: 2px; } .charging-container::after { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; /* right: 10px; */ background: rgb(236, 39, 72); transition: all .3s; -webkit-animation: charging 2s steps(5) infinite; -moz-animation: charging 2s steps(5) infinite; animation: charging 2s steps(5) infinite; animation: charging 2s steps(5) infinite; } .charging-container:hover::after { animation-play-state: paused; } @-webkit-keyframes charging { from { width: 20%; } to { width: 100%; } } @-moz-keyframes charging { from { width: 20%; } to { width: 100%; } } @keyframes charging { from { width: 20%; } to { width: 100%; } }
48
Battery Charging
By:
pixeldev
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; } }
47
CSS Bouncing Ball
By:
pixeldev
header
nav
section
/* Note: This example only works with Windows Insider Preview Builds 16237+ or the Fall Creators Update. */ body { font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif; display: grid; grid-template-areas: "header header header" "nav section aside" "footer footer footer"; grid-template-rows: 80px 1fr 50px; grid-template-columns: 15% 1fr 18%; grid-gap: 5px; height: 100vh; margin: 10px; } header { background: #707070; grid-area: header; } nav { background: #C9BFBF; grid-area: nav; } section { background: #ABABAB; grid-area: section; } aside { background: #C9C9C9; grid-area: aside; } footer { background: #707070; grid-area: footer; } header, nav, section, aside, footer { padding: 5px; }
47
CSS Grid Layout
By:
pixeldev
body { height: 100vh; overflow-x: hidden; background: -webkit-gradient( linear, left top, left bottom, from(#333), to(#000) ); background: linear-gradient(to bottom, #333, #000); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } .square { height: 150px; width: 150px; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(0deg); transform: translateX(-50%) rotateX(35deg) rotateY(0deg); bottom: 100px; left: 50%; -webkit-animation: rotate 4s infinite linear; animation: rotate 4s infinite linear; } @-webkit-keyframes rotate { 100% { -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg); transform: translateX(-50%) rotateX(35deg) rotateY(360deg); } } @keyframes rotate { 100% { -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg); transform: translateX(-50%) rotateX(35deg) rotateY(360deg); } } .side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 255, 0.2); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-1, .side-2 { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); background: rgba(0, 0, 255, 0.4); } .side-3, .side-4 { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); background: rgba(0, 0, 255, 0.6); } .side-1 { left: 50%; } .side-2 { left: -50%; } .side-3 { top: 50%; } .side-4 { top: -50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .side-5 { -webkit-transform: translateZ(-75px); transform: translateZ(-75px); } .side-6 { -webkit-transform: translateZ(75px); transform: translateZ(75px); } .ball { position: absolute; height: 50px; width: 50px; background: -webkit-gradient( linear, left bottom, right top, from(#111), color-stop(#555), to(#ccc) ); background: linear-gradient(to right top, #111, #555, #ccc); left: 50%; bottom: 180px; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); border-radius: 50%; -webkit-animation: bounce 1.4s infinite linear; animation: bounce 1.4s infinite linear; } @-webkit-keyframes bounce { 50% { -webkit-transform: translate(-50%, -300%); transform: translate(-50%, -300%); } 100% { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } } @keyframes bounce { 50% { -webkit-transform: translate(-50%, -300%); transform: translate(-50%, -300%); } 100% { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } } .shadow { height: 80px; width: 80px; background: radial-gradient(transparent, #000); -webkit-box-shadow: 10px 10px 20px #000, -10px -10px 20px #000; box-shadow: 10px 10px 20px #000, -10px -10px 20px #000; -webkit-filter: blur(10px); filter: blur(10px); border-radius: 50%; -webkit-animation: show 1.4s infinite linear; animation: show 1.4s infinite linear; opacity: 1; } @-webkit-keyframes show { 50% { -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000; box-shadow: 2px 2px 6px #000, -2px -2px 6px #000; height: 40px; width: 40px; } } @keyframes show { 50% { -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000; box-shadow: 2px 2px 6px #000, -2px -2px 6px #000; height: 40px; width: 40px; } }
46
3d box-ball animation
By:
pixeldev
#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; } }
46
Rainbow Box
By:
pixeldev
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20.02.2019
Learn More
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20.02.2019
Learn More
/* BEGIN CARD DESIGN */ .hero { display: inline-block; position: relative; width: 400px; min-width: 400px; height: 400px; border-radius: 30px; overflow:hidden; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3); margin: 30px; } .hero-profile-img { height: 70%; } .hero-description-bk { background-image: linear-gradient(0deg , #3f5efb, #fc466b); border-radius: 30px; position: absolute; top: 55%; left: -5px; height: 65%; width: 108%; transform: skew(19deg, -9deg); } .second .hero-description-bk { background-image: linear-gradient(-20deg , #bb7413, #e7d25c) } .hero-logo { height: 80px; width: 80px; border-radius: 20px; background-color: #fff; position: absolute; bottom: 30%; left: 30px; overflow:hidden; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7); } .hero-logo img { height: 100%; } .hero-description { position: absolute; color: #fff; font-weight: 900; left: 150px; bottom: 26%; } .hero-btn { position: absolute; color: #fff; right: 30px; bottom: 10%; padding: 10px 20px; border: 1px solid #fff; } .hero-btn a { color: #fff; } .hero-date { position: absolute; color: #fff; left: 30px; bottom: 10%; } /* END CARD DESIGN */ body { font-family: 'Open Sans', sans-serif; margin: 0; background-color: #eee; min-height: 100vh; } .btn i:before { width: 14px; height: 14px; position: fixed; color: #fff; background: #0077B5; padding: 10px; border-radius: 50%; top:5px; right:5px; }
46
Modern css cards design
By:
pixeldev
body{ background: #333642; } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .cog-one { --cog-color: #898888; --cog-accent-color: #A5A2A2; --cog-inner-size: 30px; --cog-outer-size: 50px; --start-rotation: 360deg; --end-rotation: 0deg; } .cog-two { --cog-color: #A16036; --cog-accent-color: #BC7F60; --cog-inner-size: 15px; --cog-outer-size: 40px; --start-rotation: 16deg; --end-rotation: 376deg; left: 120px; top: 110px; transform: rotate(var(--start-rotation)); } .cog-three { --cog-color: #F1B72E; --cog-accent-color: #FFD100; --cog-inner-size: 20px; --cog-outer-size: 50px; --start-rotation: 300deg; --end-rotation: -60deg; left: 33px; top: 210px; transform: rotate(var(--start-rotation)); } .cog { position: absolute; width: var(--cog-inner-size); height: var(--cog-inner-size); background: transparent; border-radius: 50%; border: var(--cog-outer-size) solid var(--cog-color); animation: 5s cogRotate infinite linear; } @keyframes cogRotate { 0% { transform: rotate(var(--start-rotation)); } 100% { transform: rotate(var(--end-rotation)) } } /* Inner circle accent */ .cog::before { content: ''; position: absolute; width: calc(var(--cog-inner-size) + 10px); height: calc(var(--cog-inner-size) + 10px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Outer circle accent */ .cog::after { content: ''; position: absolute; width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .teeth.vertical { position: absolute; left: 50%; transform: translateX(-50%); } /* Top and bottom teeth */ .cog-one .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; top: -70px; } .cog-two .teeth.vertical { width: 15px; height: 125px; top: -55px; background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); } .cog-three .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; top: -70px; } .teeth.vertical::after { content: ''; position: absolute; transform:rotate(45deg); } /* Top right and bottom left teeth */ .cog-one .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; } .cog-two .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); width: 15px; height: 125px; } .cog-three .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; } .teeth.horizontal { position: absolute; transform: translateY(-50%); top: 50%; } /* Left and right teeth */ .cog-one .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; left: -55px; } .cog-three .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; } .teeth.horizontal::after { content: ''; position: absolute; transform: rotate(45deg); } /* Top left and bottom right teeth */ .cog-one .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; } .cog-three .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; }
46
Cogs Animation
By:
pixeldev
/* Just to centralise elements */ .holder { position:absolute; top:50%; left:50%; margin-top:-50px; margin-top:-50px; } .bubbleholder{ position:relative; overflow:hidden; } .bubble { width:105px; height:105px; position:relative; overflow:hidden; background:#000; -webkit-transition: .2s all ease-out; -moz-transition: .2s all ease-out; transition: .2s all ease-out; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); cursor:pointer; } .bubble:hover { -webkit-transform: rotate(90deg); }
46
Hexagon to Square
By:
pixeldev
html,body{ height:100%; margin:0; padding:0; } #myDIV { height: 619px; background: -webkit-linear-gradient(#594f4f,#5479b0, #45adab, #9de0ad, #e5fcc2); -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation:mymove 10s fadeIn infinite; } @keyframes mymove { 0% {-webkit-linear-gradient(#99b898,#feceab,#ff847c,#e84a5f, #2a363b); } 16% {background:linear-gradient( #76ad39, #cdff8a, #21ac6b, #36e3cf);} 38%{ -webkit-linear-gradient(#e5fcc2,#9de0ad,#45ada8,#547980, #594f4f); } 54% {background:linear-gradient( #432b58, #734b6f, #6f1bd1, #b042c4);} 70%{background:linear-gradient(#904e95, #e96450, #ef7d1c, #a14aeb); } 86% {background:linear-gradient( #ff5f6d, #ffc371, #f4ab22, #e5dd14);} 92%{background:linear-gradient(#e96450, #f73a1e, #aa9d93, #891056); } 100% {background:linear-gradient(#0ee5cc, #29f2bc, #a32c8d, #d93ccd);}
46
Simple gradient animation
By:
pixeldev
Pixel_Dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; } .wrapper { position: relative; } .word { height: 70px; border-right: 2px solid green; line-height: 70px; overflow: hidden; animation: moveRight 1500ms steps(12) infinite, borderBlink 200ms infinite; font-size: 50px; white-space: nowrap; } .cursor { height: 100%; width: 2px; color: green; } @keyframes moveRight { 0% { width: 0%; } 100% { width: 270px; } } @keyframes borderBlink { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: green; } }
46
Typewriter Effect -Single Word Animation
By:
pixeldev
#backbar{ width:100%; height:2em; background-color: grey; opacity: 0.3; /*gives a nice hue*/ margin-top: 2em; } #progress{ width:100%; height:2em; background-color: green; -webkit-animation-name: dwindle; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: dwindle; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes dwindle { 0% {width: 100%; background-color: green} 50% {background-color: blue;} 90% {background-color: red;} 95% {width:0%;} 100% {width: 0%; background-color: red;} } @keyframes dwindle { 0% {width: 100%; background-color: green} 50% {background-color: blue;} 90% {background-color: red;} 95% {width:0%;} 100% {width: 0%; background-color: red;} }
46
Countdown Timer
By:
pixeldev
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; } }
45
scroll down line animation
By:
pixeldev
Previous
1
…
5
6
7
8
9
…
24
Next