Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
* { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: center; align-items: center; background-color: #111; } /* Style One */ .one { width: 100px; transform-origin: center; animation: rotate 4s linear infinite; } .one circle { fill: none; stroke: red; stroke-width: 10; stroke-dasharray: 1, 20; } @keyframes rotate { 100% { transform: rotate(360deg); } } .lines { width: 100px; height: 100px; position: relative; } /* Style Two */ .l2 { display: flex; justify-content: space-around; align-items: center; } .l2 .line { height: 20px; width: 4px; background-color: #fff; animation: topBottom 800ms linear infinite; } .l2 .line:nth-child(1) { animation-delay: 0s; } .l2 .line:nth-child(2) { animation-delay: 0.2s; } .l2 .line:nth-child(3) { animation-delay: 0.4s; } .l2 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes topBottom { 0% { transform: translateY(0px); } 25% { transform: translateY(40px); } 75% { transform: translateY(-40px); } 100% { transform: translateY(0px); } } /* Style Three*/ .l3 { display: flex; justify-content: space-around; align-items: center; } .l3 .line { height: 0px; width: 4px; left: 0px; background-color: #fff; animation: expand 900ms ease infinite; } .l3 .line:nth-child(1) { animation-delay: 0s; } .l3 .line:nth-child(2) { animation-delay: 0.2s; } .l3 .line:nth-child(3) { animation-delay: 0.4s; } .l3 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expand { 0%, 100% { height: 0px; } 50% { height: 40px; } } /* Style Four*/ .l4 { display: flex; justify-content: space-around; align-items: center; } .l4 .line { height: 2px; width: 4px; background-color: #fff; transform-origin: bottom; animation: expandTop 900ms ease infinite; } .l4 .line:nth-child(1) { animation-delay: 0s; } .l4 .line:nth-child(2) { animation-delay: 0.2s; } .l4 .line:nth-child(3) { animation-delay: 0.4s; } .l4 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expandTop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(20); } } /* Style five*/ .l5 { display: flex; justify-content: space-around; align-items: center; } .l5 .line { height: 20px; width: 4px; background-color: orange; animation: blink 1s ease infinite; } .l5 .line:nth-child(1), .l5 .line:nth-child(10) { animation-delay: 0.8s; } .l5 .line:nth-child(2), .l5 .line:nth-child(9) { animation-delay: 0.6s; } .l5 .line:nth-child(3), .l5 .line:nth-child(8) { animation-delay: 0.4s; } .l5 .line:nth-child(4), .l5 .line:nth-child(7) { animation-delay: 0.2s; } .l5 .line:nth-child(6), .l5 .line:nth-child(5) { animation-delay: 0s; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Style Six*/ .l6 { display: flex; justify-content: space-around; align-items: center; overflow: hidden; position: relative; height: 20px; background-color: blue; } .l6 .line:nth-child(1) { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background-color: #fff; animation: expandRight 2s ease infinite; } .l6 .line:nth-child(2) { position: absolute; right: 0; top: 0; height: 10px; width: 100%; animation: expandLeft 2s ease infinite; background-color: #fff; } @keyframes expandRight { 0% { transform-origin: left; transform: translateX(0%); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes expandLeft { 0% { transform-origin: right; transform: translateX(100%); } 50% { transform: translateX(0%); transform-origin: left; } 100% { transform: translateX(100%); } } /* Style Seven */ .l7 { position: relative; width: 80px; height: 80px; animation: 900ms linear rotateMain infinite; } .l7 .line { position: absolute; background-color: #fff; } .l7 .line:nth-child(1) { left: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(2) { right: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(3) { left: 40px; animation: 600ms ease-in growHeight infinite; } .l7 .line:nth-child(4) { left: 40px; bottom: 0px; animation: 600ms ease-in growHeight infinite; } @keyframes growHeight { 0%, 100% { height: 0px; width: 2px; } 50% { height: 40px; width: 2px; } } @keyframes growWidth { 0%, 100% { width: 0px; height: 2px; } 50% { width: 40px; height: 2px; } } @keyframes rotateMain { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Style Eight*/ .l8 { display: flex; justify-content: space-around; align-items: center; } .l8 .line { height: 20px; width: 4px; background-color: rgb(255, 0, 76); animation: growLine 1s ease infinite; } .l8 .line:nth-child(1), .l8 .line:nth-child(10) { animation-delay: 0.8s; } .l8 .line:nth-child(2), .l8 .line:nth-child(9) { animation-delay: 0.6s; } .l8 .line:nth-child(3), .l8 .line:nth-child(8) { animation-delay: 0.4s; } .l8 .line:nth-child(4), .l8 .line:nth-child(7) { animation-delay: 0.2s; } .l8 .line:nth-child(6), .l8 .line:nth-child(5) { animation-delay: 0s; } @keyframes growLine { 0%, 100% { transform: scale(0); } 50% { transform: scale(1.5); } } .circle-loader { width: 80px; height: 80px; border: 8px solid #333; border-top: 8px solid red; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
69
8 Pre loader animation using css
By:
rald_dev
Navigation CSS Menu
Home
About
Blog
Portefolio
Contact
nav { margin: 27px auto 0; position: relative; width: 590px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } nav a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } nav .animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all .5s ease 0s; border-radius: 8px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 100px; } a:nth-child(4) { width: 160px; } a:nth-child(5) { width: 120px; } nav .start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } nav .start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #e74c3c; } nav .start-blog, a:nth-child(3):hover~.animation { width: 100px; left: 210px; background-color: #3498db; } nav .start-portefolio, a:nth-child(4):hover~.animation { width: 160px; left: 310px; background-color: #9b59b6; } nav .start-contact, a:nth-child(5):hover~.animation { width: 120px; left: 470px; background-color: #e67e22; } body { font-size: 12px; font-family: sans-serif; background: #2c3e50; } h1 { text-align: center; margin: 40px 0 40px; text-align: center; font-size: 30px; color: #ecf0f1; text-shadow: 2px 2px 4px #000000; font-family: 'Cherry Swash', cursive; } p { position: absolute; bottom: 20px; width: 100%; text-align: center; color: #ecf0f1; font-family: 'Cherry Swash',cursive; font-size: 16px; } span { color: #2BD6B4; }
69
Navigation Menu
By:
rald_dev
I am a
HTML
CSS
JAVASCRIPT
developer
body { display: flex; align-items: center; justify-content: center; min-height: 100vh;; } .slider-wrapper { font-size: 40px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .slider { height: 50px; overflow: hidden; padding: 0 10px; } .slider > div { box-sizing: border-box; color: #FFF; height: 50px; margin-bottom: 50px; padding: 0 10px; text-align: center; } .text1 { background-color: #2ed573; animation: slide 5s linear infinite; } .text2 { background-color: #ffa502; } .text3 { background-color: #ff4757; } @keyframes slide { 0% { margin-top: -300px; } 5% { margin-top: -200px; } 33% { margin-top: -200px; } 38% { margin-top: -100px; } 66% { margin-top: -100px; } 72% { margin-top: -0; } 100% { margin-top: 0; } }
69
Text sliding 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); } }
69
Pulsating heart
By:
rald_dev
Text Reveal Animation
* { margin: 0; padding: 0; } h1 { text-transform: uppercase; font-size: 2em; color: #262626; margin: 220px auto 20px 80px; padding: 20px; text-align: center; position: relative; z-index: 1; display: inline-block; } h1:before { content: ''; width: 0; height: 100%; background: #fbff65; position: absolute; top: 0; left: 0; animation: animate 5s 2s ease alternate 1 forwards; border-right: 5px solid #262626; } @keyframes animate { 0% { width: 100%; z-index: 1; } 50% { width: 0%; z-index: 1; } 51% { width: 0%; z-index: -1; } 100% { width: 100%; z-index: -1; } }
69
Text reveal animation v2
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; } }
68
Rainbow Box
By:
rald_dev
Bouncy
body { font-family: arial; background: -webkit-radial-gradient(circle, #757462, #272623); background: -moz-radial-gradient(circle, #757462, #272623); } h1 { -webkit-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; position: relative; float: left; color: white; } .object-1 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 50%; background: #ffcc00; -webkit-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-2 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 25%; background: #00ccff; -webkit-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-3 { position: absolute; width: 100px; height: 100px; border-radius: 10%; left: 75%; background: #00cc00; -webkit-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; } @-webkit-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-moz-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-webkit-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } } @-moz-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } }
68
Bouncing
By:
rald_dev
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; }
68
CSS Grid Layout
By:
rald_dev
CSS
Border animation ?
Hover me to find out !
=>
CSS Border animation ?
Hover me to find out !
body { text-align:center; } header { display:inline-table; vertical-align:middle; margin:1em ; padding:0.5em 1em; background: linear-gradient( to right, transparent 20%, turquoise 20%, turquoise 80%, transparent 80% ) bottom no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) right 300% no-repeat, linear-gradient( to right, turquoise 0%, turquoise 100% ) 9000% 0 no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) left 9000% no-repeat ; transition:background-size 2s ease-in; } header, header ~ header:hover { background-size: 100% 8px, 3px 0, 3px 3px, 3px 0; } header:hover, header ~ header { background-size: 200% 3px , 3px 100%, 100% 3px, 3px 100%; transition:background-size 2s ease-in-out; } span { font-size:4em; display:inline-block; vertical-align:middle; background:turquoise; border-radius:100%; box-shadow:0 0 5px; }
67
Border Animation
By:
rald_dev
body{ margin:0; padding:0; background:#262626; } .pulse{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; background:#58ea00; border-radius:50%; } .pulse .fas{ color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(90deg); font-size:7em; } .pulse:before, .pulse:after{ content:''; display:block; position:absolute; border:50%; border:1px solid #58ea00; top:-20px; left:-20px; right:-20px; bottom:-20px; border-radius:50%; animation:animtephone 1.5s linear infinite; opacity:0; } .pulse:after{ animation-delay:0.5s; } @keyframes animtephone{ 0%{ transform:scale(0.5); opacity:0; } 50%{ opacity:1; } 100%{ transform:scale(1.2); opacity:0; } }
66
Ringing call pluse animation
By:
rald_dev
ul { margin-left: 20px; margin-top: 20px; } li { float: left; width: 16px; height: 64px; background: #aeb5da; border: 1px solid #8490c6; box-sizing: border-box; margin-right:8px; opacity: 0.2; } li:nth-child(1) { animation-name: anim; animation-duration: .9s; animation-timing-function: linear; animation-iteration-count: infinite; } li:nth-child(2) { animation-name: anim; animation-duration: .9s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; } li:nth-child(3) { animation-name: anim; animation-duration: .9s; animation-delay: .6s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes anim { from { opacity: 1; transform: scale(1.1); } to { opacity: 0.2; transform: scale(1); } }
66
Facebook Loading Animation
By:
rald_dev
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
body {background:#0f0f0f; font-family:Arial, Helvetica, sans-serif;} a, a:link, a:visited, a:hover, a:active {color:inherit; text-decoration:none;} .menu {position:absolute; top:50%; left:50%; width:15em; height:auto; transform:translate(-50%, -50%); overflow:hidden; border-radius:0.25em; background:#333;} .menu-block {background:#369; color:#fff;} .menu-block:target .submenu {max-height:10em; padding:1em 0 0.5em 0;} .block-title {display:block; position:relative; padding:1em; border-bottom:1px solid #258;} .menu-block:target .block-title {border-bottom:1px solid #369;} .block-title i {margin-right:0.5em;} .block-title:before {content:""; position:absolute; display:none; width:1em; height:1em; background:#369; left:1em; bottom:-0.5em; transform:rotate(45deg);} .menu-block:target .block-title:before {display:block;} .submenu {background:#333; padding:0; overflow:hidden; max-height:0; transition:all 0.25s linear;} .submenu a {display:block; position:relative; padding:0.25em 1em; margin:0.25em 0;} .submenu a:before {content:""; position:absolute; width:0.2em; height:100%; background:none; top:0; left:0.25em; transition:background 0.25s linear;} .submenu a:hover:before {background:#369;} .submenu a i {margin-right:0.5em;}
65
Navigation Menu [
By:
rald_dev
Previous
1
…
4
5
6
7
8
…
10
Next