Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
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; } }
80
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); } }
80
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; } }
80
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; } }
79
Rainbow Box
By:
rald_dev
Menu
Programming
C++
C#
Java
Web Development
Javascript
PHP
Ruby
Python
OS
Windows
Macintosh
Linux
Projects
Android
iOS
Web
Windows
About
*{ padding:0; margin:0; box-sizing:border-box; } .wrapper{ min-height: calc(100vh - 70px); width:100%; position: relative; } html{ height: 100%; } body{ height:100%; background:#ddd; } h2{ padding:40px; background:#112233; color:#f0f1f5; font-family: big john; text-align: center; font-size:30pt; letter-spacing: 15px; } .navigationDesktop{ background:#fc575e; } nav { height:40px; width:560px; margin:0 auto; text-align: center; text-transform: uppercase; } nav a{ display:block; text-decoration: none; font-family: monospace; font-weight: bold; font-size:13pt; color:#112233; } nav a:hover{ background:#223433; color:#f0f1f5; } nav ul{ list-style: none; } nav ul li{ float:left; width:140px; height:40px; line-height: 40px; background:#fc575e; } nav ul ul li{ position: relative; display:none; } nav ul ul ul{ display:none; } nav ul li:hover ul li{ display: block; animation: navmenu 600ms forwards; } @keyframes navmenu{ 0%{ opacity:0; top:-10px; } 100%{ opacity:0.9; top:0px; } } nav ul ul li:hover ul{ display:block; position:absolute; width:140px; left:140px; top:0px; } article{ padding:10px; font-family: arial; } footer{ height: 70px; border-top:2px solid #fc575e; padding:20px; width: 100%; text-align: center; background:#112233; color:#fff; font-family: sans-serif; font-weight: bold; font-size:11pt; text-transform: uppercase; }
79
Navigation Menu with Footer Menu
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; } }
78
Ringing call pluse animation
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; }
78
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; }
78
Border Animation
By:
rald_dev
Loading
*, html,body{ padding:0px; margin:0px; box-sizing:border-box; font-family:'Poppins', sans-serif; } ::selection{ background-color:#2d98da; color:#fff; } body{ background-color:#227093; display:flex; justify-content:center; align-items:center; width:100%; min-height:100vh; } .Box{ position:relative; width:150px; height:150px; border:3px solid rgba(255,255,255,.2); border-radius:50%; text-align:center; line-height:150px; color:#57beec; font-size:20px; box-shadow:0px 0px 10px rgba(0,0,0,.2); font-weight:bold; } .Box:before{ content:''; position:absolute; top:-3px; left:-3px; width:100%; height:100%; background-color:transparent; border:3px solid transparent; border-top:3px solid #57beec; border-right:3px solid #57beec; border-radius:50%; transform:rotate(0deg); animation:SpanLoading 2s linear infinite; } .Box span{ position:absolute; top: 50%; left:50%; width:50%; height:3px; background-color:transparent; transform-style:preserve-3d; transform-origin:left; transform:rotate(42deg); animation:Loading 2s linear infinite; } .Box span:before{ content:''; position:absolute; width:15px; height:15px; border-radius:50%; background-color:#57beec; right:-7px; bottom:-7px; box-shadow:0px 0px 10px #57beec; } @keyframes Loading{ 0%{ transform:rotate(42deg); } 100%{ transform:rotate(402deg); } } @keyframes SpanLoading{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
78
Glowing Loader Ring 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); } }
77
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;}
76
Navigation Menu [
By:
rald_dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; align-items: center; min-height: 100vh; display: flex; } .box-outer { overflow: hidden; margin: 50px auto; width: 200px; height: 200px; } .main_box { width: 200px; height: 200px; position: relative; background: #f34c4c; border: 5px solid #ffffff; } .bar { position: absolute; width: 50px; height: 5px; background: rgb(0, 0, 0); transition: all 1s linear; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; } .bar.delay { animation-delay: 0.5s; } .top { top: -5px; left: -5px; } .right { top: 18px; right: -28px; transform: rotate(90deg); } .bottom { bottom: -5px; left: -5px; } .left { top: 18px; left: -28px; transform: rotate(90deg); } @-webkit-keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } @keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } .top, .bottom { animation-name: h-move; } @-webkit-keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } @keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } .right, .left { animation-name: v-move; }
76
Box border animation
By:
rald_dev
Previous
1
…
5
6
7
8
9
10
Next