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; } :root{ --color-bg:#222222; --color-box-1:#ffffff; --color-box-2:#ff1a3c; --animation-speed:1.5s; --row-col-size:5; --grid-item-size:8vmin; } body{ background-color: var(--color-bg); min-height: 100vh; display: grid; place-items: center; } .art{ border: .2rem solid var(--color-box-2); padding: 5vmin; display: grid; grid-template-columns: repeat(var(--row-col-size),var(--grid-item-size)); grid-template-rows: repeat(var(--row-col-size),var(--grid-item-size)); gap: 1vmin; } .item:nth-child(odd){ background-color: var(--color-box-1); animation: ans-white var(--animation-speed) linear infinite; } .item:nth-child(even){ background-color: var(--color-box-2); animation: ans var(--animation-speed) linear infinite; } @keyframes ans { 0%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 25%{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); } 50%{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 0); } 75%{ clip-path: polygon(100% 0, 100% 0, 0 100%, 0 0); } 100%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } } @keyframes ans-white { 0%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 25%{ clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%); } 50%{ clip-path: polygon(0 0, 100% 100%, 0 100%, 0 100%); } 75%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%); } 100%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } }
37
Geometric Animation
By:
rald_dev
/* Inspirated from http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html */ .ouro { position: relative; display:inline-block; height: 46px; width: 46px; margin: 1em; border-radius: 50%; background: none repeat scroll 0 0 #DDDDDD; overflow:hidden; box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); } .ouro:after { content: ""; position: absolute; top: 9px; left: 9px; display: block; height: 28px; width: 28px; background: none repeat scroll 0 0 #F2F2F2; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.1); } .ouro > span { position: absolute; height: 100%; width: 50%; overflow: hidden; } .left { left:0 } .right { left:50% } .anim { position: absolute; left: 100%; top: 0; height: 100%; width: 100%; border-radius: 999px; background: none repeat scroll 0 0 #508EC3; opacity: 0.8; -webkit-animation: ui-spinner-rotate-left 3s infinite; animation: ui-spinner-rotate-left 3s infinite; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; } .left .anim { border-bottom-left-radius: 0; border-top-left-radius: 0; } .right .anim { border-bottom-right-radius: 0; border-top-right-radius: 0; left: -100%; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; } /* v2 */ .ouro2 .anim { -webkit-animation-delay:0; animation-delay:0; } .ouro2 .right .anim{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } /* v3 */ .ouro3 .anim { -webkit-animation-delay: 0s; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear; animation-delay: 0s; animation-duration:3s; animation-timing-function: linear; } .ouro3 .right .anim{ -webkit-animation-name: ui-spinner-rotate-right; -webkit-animation-delay:0; -webkit-animation-delay: 1.5s; animation-name: ui-spinner-rotate-right; animation-delay:0; animation-delay: 1.5s; } /* round variation */ .round .ouro:after {display:none } /* double variation */ .double .ouro:after { height: 13px; width: 13px; left: 7px; top: 7px; border: 10px solid #ddd; background: transparent; box-shadow: none; } @keyframes ui-spinner-rotate-right{ 0%{transform:rotate(0deg)} 25%{transform:rotate(180deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(360deg)} 100%{transform:rotate(360deg)} } @keyframes ui-spinner-rotate-left{ 0%{transform:rotate(0deg)} 25%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-right{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(180deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(360deg)} 100%{-webkit-transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-left{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(0deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)} } /* * Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code. */ /* presentation styles */ html {height: 100%} body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%} .block {display: table-cell; vertical-align:middle} h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;} .info {margin-top: 25px} .info a {font-size: 12px; color: #999} .info br + a {text-decoration:none}
36
Circle Loader v2
By:
rald_dev
Hover me
body{ } button { text-transform: uppercase; border: 2px solid #1E1A3E; background: rgb(112, 204, 243); color: #1E1A3E; padding: 10px; font-size: 58px; position: relative; box-sizing: border-box; transition: all 100ms ease; z-index: 1; padding: 10px 35px; } button:before { content:''; position: absolute; top: 0px; left: 0px; width: 0px; height: 88px; background: rgba(30, 26, 62, 1); transition: all 500ms ease; color: white !important; } button:hover:before { width: 100%; z-index: -1; } button:hover{ color:white; }
36
Button Hover
By:
rald_dev
body{ background: #373940; } .socket{ width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } .hex-brick{ background: #ABF8FF; width: 30px; height: 17px; position: absolute; top: 5px; animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .h2{ transform: rotate(60deg); -webkit-transform: rotate(60deg); } .h3{ transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .gel{ height: 30px; width: 30px; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; left: 50%; } .center-gel{ margin-left: -15px; margin-top: -15px; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .c1{ margin-left: -47px; margin-top: -15px; } .c2{ margin-left: -31px; margin-top: -43px; } .c3{ margin-left: 1px; margin-top: -43px; } .c4{ margin-left: 17px; margin-top: -15px; } .c5{ margin-left: -31px; margin-top: 13px; } .c6{ margin-left: 1px; margin-top: 13px; } .c7{ margin-left: -63px; margin-top: -43px; } .c8{ margin-left: 33px; margin-top: -43px; } .c9{ margin-left: -15px; margin-top: 41px; } .c10{ margin-left: -63px; margin-top: 13px; } .c11{ margin-left: 33px; margin-top: 13px; } .c12{ margin-left: -15px; margin-top: -71px; } .c13{ margin-left: -47px; margin-top: -71px; } .c14{ margin-left: 17px; margin-top: -71px; } .c15{ margin-left: -47px; margin-top: 41px; } .c16{ margin-left: 17px; margin-top: 41px; } .c17{ margin-left: -79px; margin-top: -15px; } .c18{ margin-left: 49px; margin-top: -15px; } .c19{ margin-left: -63px; margin-top: -99px; } .c20{ margin-left: 33px; margin-top: -99px; } .c21{ margin-left: 1px; margin-top: -99px; } .c22{ margin-left: -31px; margin-top: -99px; } .c23{ margin-left: -63px; margin-top: 69px; } .c24{ margin-left: 33px; margin-top: 69px; } .c25{ margin-left: 1px; margin-top: 69px; } .c26{ margin-left: -31px; margin-top: 69px; } .c27{ margin-left: -79px; margin-top: -15px; } .c28{ margin-left: -95px; margin-top: -43px; } .c29{ margin-left: -95px; margin-top: 13px; } .c30{ margin-left: 49px; margin-top: 41px; } .c31{ margin-left: -79px; margin-top: -71px; } .c32{ margin-left: -111px; margin-top: -15px; } .c33{ margin-left: 65px; margin-top: -43px; } .c34{ margin-left: 65px; margin-top: 13px; } .c35{ margin-left: -79px; margin-top: 41px; } .c36{ margin-left: 49px; margin-top: -71px; } .c37{ margin-left: 81px; margin-top: -15px; } .r1{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } .r1 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } @keyframes pulse{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0.01); transform: scale(0.01); } 100%{ -webkit-transform: scale(1); transform: scale(1); } } @keyframes fade{ 0%{ background: #ABF8FF; } 50%{ background: #90BBBF; } 100%{ background: #ABF8FF; } } @-webkit-keyframes pulse{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0.01); transform: scale(0.01); } 100%{ -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fade{ 0%{ background: #ABF8FF; } 50%{ background: #389CA6; } 100%{ background: #ABF8FF; } }
36
Hexagonal Loading Animation
By:
rald_dev
BUTTON
BUTTON
BUTTON
*{ margin: 0px; padding: 0xp; box-sizing: border-box; outline-style: none; } body{ display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } button{ display: flex; align-items: center; justify-content: center; border: none; background-color: rgba(100, 32, 163, 0.877); margin: auto; height: 40px; width: 100px; clip-path: circle(20%); transition: 0.5s; } span{ font-size: 0px; color: burlywood; width: 100%; height: 100%; padding: 10px; transition: 0.5s; } button:hover{ transition: 0.5s; clip-path: circle(100%); border: 1px purple solid; background: rgba(226, 180, 138, 0.925); } span:hover{ transition: 0.5s; font-size: 15px; color: purple; transform: rotate(360deg); }
36
Button Animation
By:
rald_dev
.loadingspinner { --square: 26px; --offset: 30px; --duration: 2.4s; --delay: 0.2s; --timing-function: ease-in-out; --in-duration: 0.4s; --in-delay: 0.1s; --in-timing-function: ease-out; width: calc( 3 * var(--offset) + var(--square)); height: calc( 2 * var(--offset) + var(--square)); padding: 0px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 30px; position: relative; } .loadingspinner div { display: inline-block; background: darkorange; /*background: var(--text-color);*/ /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/ border: none; border-radius: 2px; width: var(--square); height: var(--square); position: absolute; padding: 0px; margin: 0px; font-size: 6pt; color: black; } .loadingspinner #square1 { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); animation: square1 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square2 { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square2 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square3 { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square3 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square4 { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square4 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square5 { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square5 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both; } @keyframes square1 { 0% { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); } 8.333% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square2 { 0% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } 8.333% { left: calc( 0 * var(--offset) ); top: calc( 2 * var(--offset) ); } 16.67% { left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); } 25.00% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 83.33% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 91.67% { left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); } 100% { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); } } @keyframes square3 { 0%,100% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 16.67% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 25.00% { left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); } 33.33% { left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); } 41.67% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 66.67% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 75.00% { left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); } 83.33% { left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); } 91.67% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square4 { 0% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 33.33% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 41.67% { left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); } 50.00% { left: calc( 3 * var(--offset) ); top: calc( 2 * var(--offset) ); } 58.33% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square5 { 0% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 50.00% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 58.33% { left: calc( 3 * var(--offset) ); top: calc( 0 * var(--offset) ); } 66.67% { left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); } 75.00% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes squarefadein { 0% { transform: scale(0.75); opacity: 0.0; } 100% { transform: scale(1.0); opacity: 1.0; } }
36
Tetris Block Loader
By:
pixeldev
:root { --sqrt3: 1.73205080757; /* Square root of 3 */ --time: 11; /* Duration of animation */ --gap: 1; /* Horizontal gap between hexagons */ --radius: 3; /* Radius of inscribed circle */ --Gap: var(--gap) / 2 * var(--sqrt3); /* Vertical gap between hexagons */ --Radius: 2 / var(--sqrt3) * var(--radius); /* Radius of circumcircle */ } @keyframes odd-animation { 0% { transform: translate(calc( 0.5 * var(--offset-x) ), calc( 0.5 * var(--offset-y) )) scale(0) } 33% { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) } 66% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(1) } 100% { transform: translate(calc( 3 * var(--offset-x) ), calc( 3 * var(--offset-y) )) scale(0) } } @keyframes even-animation { 50% { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) } 100% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(0) } } body { align-items: center; background-color: black; display: flex; height: 100vh; justify-content: center; overflow: hidden; margin: 0; } .hex { color: white; display: flex; font-size: 3vmin; height: calc(2em * var(--Radius)); width: calc(2em * var(--radius)); } .hex::before { border: calc(0.5em * var(--Radius)) solid transparent; border-left: 0; border-right: calc(1em * var(--radius)) solid currentColor; content: ""; height: var(--Radius); } .hex::after { border: calc(0.5em * var(--Radius)) solid transparent; border-left: calc(1em * var(--radius)) solid currentColor; border-right: 0; content: ""; height: var(--Radius); } .center { position: relative; } .odd, .even { --global-offset-x: calc( 0.5em * var(--gap) + var(--radius) * 1em); --global-offset-y: calc( 1.5em * var(--Radius) + var(--Gap) * 1em); animation: infinite cubic-bezier(.21, .61, .01, .89); position: absolute; transform: translate(0, 0) scale(0); } .odd { animation-duration: 11s; } .even { animation-duration: 7.333333333s; } .hex.first { animation-delay: -6.2857142857s; } .hex.second { animation-delay: -2.619047619s; } .hex.third { animation-delay: 1.0476190476s; } @supports (animation-delay: calc(1 * 1s)) and (animation-duration: calc(1 * 1s)) { .odd { animation-duration: calc(var(--time) * 1s); } .even { animation-duration: calc( var(--time) * 2 / 3 * 1s); } .hex.first { animation-delay: calc( var(--time) / -1.75 * 1s ); } .hex.second { animation-delay: calc( var(--time) * 1.25 / -5.25 * 1s ); } .hex.third { animation-delay: calc( var(--time) * -0.25 / -2.625 * 1s ); } } .hex.one { --offset-x: calc( var(--global-offset-x) * 1 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: odd-animation; bottom: 0; left: 0; } .hex.two { --offset-x: calc( var(--global-offset-x) * 1.5 ); --offset-y: calc( var(--global-offset-y) * -0.5 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 0.5 ); left: calc( var(--global-offset-x) * 1.5 ); } .hex.three { --offset-x: calc( var(--global-offset-x) * 2 ); --offset-y: calc( var(--global-offset-y) * 0 ); animation-name: odd-animation; bottom: 0; right: 0; } .hex.four { --offset-x: calc( var(--global-offset-x) * 1.5 ); --offset-y: calc( var(--global-offset-y) * 0.5 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 0.5 ); left: calc( var(--global-offset-x) * 1.5 ); } .hex.five { --offset-x: calc( var(--global-offset-x) * 1 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: odd-animation; top: 0; left: 0; } .hex.six { --offset-x: calc( var(--global-offset-x) * 0 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 1 ); left: 0; } .hex.seven { --offset-x: calc( var(--global-offset-x) * -1 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: odd-animation; top: 0; right: 0; } .hex.eight { --offset-x: calc( var(--global-offset-x) * -1.5 ); --offset-y: calc( var(--global-offset-y) * 0.5 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 0.5 ); right: calc( var(--global-offset-x) * 1.5 ); } .hex.nine { --offset-x: calc( var(--global-offset-x) * -2 ); --offset-y: calc( var(--global-offset-y) * 0 ); animation-name: odd-animation; top: 0; right: 0; } .hex.ten { --offset-x: calc( var(--global-offset-x) * -1.5 ); --offset-y: calc( var(--global-offset-y) * -0.5 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 0.5 ); right: calc( var(--global-offset-x) * 1.5 ); } .hex.eleven { --offset-x: calc( var(--global-offset-x) * -1 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: odd-animation; bottom: 0; right: 0; } .hex.twelve { --offset-x: calc( var(--global-offset-x) * 0 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 1 ); left: 0; }
36
Hexagon Animation
By:
rald_dev
I'm a bouncing text
@keyframes bounce { 0%, 30%, 50%, 100% { transform: translateY(0); } 60%, 80% { transform: translateY(-50%) } 20%, 40% { transform: translateY(-100%); } } .container-div { width: 200px; text-align: center; background-color: green; padding: 5px; margin: 0 auto; } .p-bounce { color: white; animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite; }
36
Bouncing text
By:
rald_dev
.wrapper { position: absolute; left: 50%; top: 70%; transform: scale(1.5, 1.5) translate(-50%, -50%); } .floor { position: absolute; left: 50%; top: 50%; width: 350px; height: 5px; background: #673C63; transform: translate(-50%, -50%); box-shadow: 0px 2px 5px #111; z-index: 2; } .candles { position: absolute; left: 50%; top: 50%; width: 250px; height: 150px; transform: translate(-50%, -100%); z-index: 1; } .candle1 { position: absolute; left: 50%; top: 50%; width: 35px; height: 100px; background: #fff; border: 3px solid #673C63; border-bottom: 0px; border-radius: 3px; transform-origin: center right; transform: translate(60%, -25%); box-shadow: -2px 0px 0px #95c6f2 inset; animation: expand-body 3s infinite linear; } .candle1__stick, .candle2__stick { position: absolute; left: 50%; top: 0%; width: 3px; height: 15px; background: #673C63; border-radius: 8px; transform: translate(-50%, -100%); } .candle2__stick { height: 12px; transform-origin: bottom center; animation: stick-animation 3s infinite linear; } .candle1__eyes, .candle2__eyes { position: absolute; left: 50%; top: 0%; width: 35px; height: 30px; transform: translate(-50%, 0%); } .candle1__eyes-one { position: absolute; left: 30%; top: 20%; width: 5px; height: 5px; border-radius: 100%; background: #673C63; transform: translate(-70%, 0%); animation: blink-eyes 3s infinite linear; } .candle1__eyes-two { position: absolute; left: 70%; top: 20%; width: 5px; height: 5px; border-radius: 100%; background: #673C63; transform: translate(-70%, 0%); animation: blink-eyes 3s infinite linear; } .candle1__mouth { position: absolute; left: 40%; top: 20%; width: 0px; height: 0px; border-radius: 20px; background: #673C63; transform: translate(-50%, -50%); animation: uff 3s infinite linear; } .candle__smoke-one { position: absolute; left: 30%; top: 50%; width: 30px; height: 3px; background: grey; transform: translate(-50%, -50%); animation: move-left 3s infinite linear; } .candle__smoke-two { position: absolute; left: 30%; top: 40%; width: 10px; height: 10px; border-radius: 10px; background: grey; transform: translate(-50%, -50%); animation: move-top 3s infinite linear; } .candle2 { position: absolute; left: 20%; top: 65%; width: 42px; height: 60px; background: #fff; border: 3px solid #673C63; border-bottom: 0px; border-radius: 3px; transform: translate(60%, -15%); transform-origin: center right; box-shadow: -2px 0px 0px #95c6f2 inset; animation: shake-left 3s infinite linear; } .candle2__eyes-one { position: absolute; left: 30%; top: 50%; width: 5px; height: 5px; display: inline-block; border: 0px solid #673C63; border-radius: 100%; float: left; background: #673C63; transform: translate(-80%, 0%); animation: changeto-lower 3s infinite linear; } .candle2__eyes-two { position: absolute; left: 70%; top: 50%; width: 5px; height: 5px; display: inline-block; border: 0px solid #673C63; border-radius: 100%; float: left; background: #673C63; transform: translate(-80%, 0%); animation: changeto-greater 3s infinite linear; } .light__wave { position: absolute; top: 35%; left: 35%; width: 75px; height: 75px; border-radius: 100%; z-index: 0; transform: translate(-25%, -50%) scale(2.5, 2.5); border: 2px solid rgba(255, 255, 255, 0.2); animation: expand-light 3s infinite linear; } .candle2__fire { position: absolute; top: 50%; left: 40%; display: block; width: 16px; height: 20px; background-color: red; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #FF9800; transform: translate(-50%, -50%); animation: dance-fire 3s infinite linear; } @keyframes blink-eyes { 0%,35% { opacity: 1; transform: translate(-70%, 0%); } 36%,39% { opacity: 0; transform: translate(-70%, 0%); } 40% { opacity: 1; transform: translate(-70%, 0%); } 50%,65% { transform: translate(-140%, 0%); } 66% { transform: translate(-70%, 0%); } } @keyframes expand-body { 0%,40% { transform: scale(1, 1) translate(60%, -25%); } 45%,55% { transform: scale(1.1, 1.1) translate(60%, -28%); } 60% { transform: scale(0.89, 0.89) translate(60%, -25%); } 65% { transform: scale(1, 1) translate(60%, -25%); } 70% { transform: scale(0.95, 0.95) translate(60%, -25%); } 75% { transform: scale(1, 1) translate(60%, -25%); } } @keyframes uff { 0%,40% { width: 0px; height: 0px; } 50%,54% { width: 15px; height: 15px; left: 30%; } 59% { width: 5px; height: 5px; left: 20%; } 62% { width: 2px; height: 2px; left: 20%; } 67% { width: 0px; height: 0px; left: 30%; } } @keyframes change-background { 0%,59%,98%,100% { background: #FFF; } 61%,97% { background: #000; } } @keyframes move-left { 0%,59%,100% { width: 0px; left: 40%; } 60% { width: 30px; left: 30%; } 68% { width: 0px; left: 20%; } } @keyframes move-top { 0%,64%,100% { width: 0px; height: 0px; top: 0%; } 65% { width: 10px; height: 10px; top: 40%; left: 40%; } 80% { width: 0px; height: 0px; top: 20%; } } @keyframes shake-left { 0%,40% { left: 20%; transform: translate(60%, -15%); } 50%,54% { left: 20%; transform: translate(60%, -15%); } 59% { left: 20%; transform: translate(60%, -15%); } 62% { left: 18%; transform: translate(60%, -15%); } 65% { left: 21%; transform: translate(60%, -15%); } 67% { left: 20%; transform: translate(60%, -15%); } 75% { left: 20%; transform: scale(1.15, 0.85) translate(60%, -15%); background: #fff; border-color: #673C63; } 91% { left: 20%; transform: scale(1.18, 0.82) translate(60%, -10%); background: #F44336; border-color: #F44336; box-shadow: -2px 0px 0px #F44336 inset; } 92% { left: 20%; transform: scale(0.85, 1.15) translate(60%, -15%); } 95% { left: 20%; transform: scale(1.05, 0.95) translate(60%, -15%); } 97% { left: 20%; transform: scale(1, 1) translate(60%, -15%); } } @keyframes stick-animation { 0%,40% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 50%,54% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 59% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 62% { left: 50%; top: 0%; transform: rotateZ(-15deg) translate(-50%, -100%); } 65% { left: 50%; top: 0%; transform: rotateZ(15deg) translate(-50%, -100%); } 70% { left: 50%; top: 0%; transform: rotateZ(-5deg) translate(-50%, -100%); } 72% { left: 50%; top: 0%; transform: rotateZ(5deg) translate(-50%, -100%); } 74%,84% { left: 50%; top: 0%; transform: rotateZ(0deg) translate(-50%, -100%); } 85% { transform: rotateZ(180deg) translate(0%, 120%); } 92% { left: 50%; top: 0%; transform: translate(-50%, -100%); } } @keyframes expand-light { 10%,29%,59%,89% { transform: translate(-25%, -50%) scale(0, 0); border: 2px solid rgba(255, 255, 255, 0); } 90%,20%,50% { transform: translate(-25%, -50%) scale(1, 1); } 95%,96%,26%,27%,56%,57% { transform: translate(-25%, -50%) scale(2, 2); border: 2px solid rgba(255, 255, 255, 0.5); } 0%,28%,58%,100% { transform: translate(-25%, -50%) scale(2.5, 2.5); border: 2px solid rgba(255, 255, 255, 0.2); } } @keyframes dance-fire { 59%,89% { left: 40%; width: 0px; height: 0px; } 90%,0%,7%,15%,23%,31%,39%,47%,55% { left: 40.8%; width: 16px; height: 20px; background: #FFC107; } 94%,3%,11%,19%,27%,35%,43%,51%,58% { left: 41.2%; width: 16px; height: 20px; background: #FF9800; } } @keyframes changeto-lower { 0%,70%,90% { padding: 0px; display: inline-block; border-radius: 100%; background: #673C63; border-width: 0 0 0 0; border: 0px solid #673C63; transform: translate(-90%, 0%); } 71%,89% { background: none; border: solid #673C63; border-radius: 0px; border-width: 0 2px 2px 0; display: inline-block; padding: 1px; float: left; transform-origin: bottom left; transform: rotate(-45deg) translate(-50%, -65%); -webkit-transform: rotate(-45deg) translate(-50%, -65%); } } @keyframes changeto-greater { 0%,70%,90% { top: 50%; padding: 0px; display: inline-block; border-radius: 100%; background: #673C63; border-width: 0 0 0 0; border: 0px solid #673C63; transform: translate(-80%, 0%); } 71%,89% { top: 30%; background: none; border: solid #673C63; border-radius: 0px; border-width: 0 2px 2px 0; display: inline-block; padding: 1px; float: left; transform-origin: bottom left; transform: rotate(135deg) translate(-80%, 20%); -webkit-transform: rotate(135deg) translate(-80%, 20%); } }
35
Candle
By:
jusar
body { width: 100%; height: 100%; margin: 0; padding: 0; } #ms-container { width: 100%; height: 100vh; background: #1c9cf2; } .ms-content { position: absolute; width: 200px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 10px solid #2ea4f2; border-radius: 100%; } .ms-content-inside { width: 100%; height: 100%; position: relative; } .ms-line-down-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotate(0deg); transition: transform 0s ease; } #ms-download { display: none; } #ms-download:checked ~ .ms-line-down-container { transform: rotate(-360deg); transition: transform 1.5s ease 1.25s; } .ms-line-down { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 10px; height: 125px; background: #FFFFFF; border-radius: 50px; transition: height .5s ease; } #ms-download:checked ~ .ms-line-down-container .ms-line-down { height: 10px; top: -20px; animation: ms-bounce .5s forwards .55s; } #ms-download:checked ~ .ms-line-down-container .ms-line-down:before { content: ''; position: absolute; top: 0; left: -94px; right: 0; bottom: 0; width: 200px; height: 200px; border: 10px solid transparent; border-radius: 100%; animation: ms-border-fill .5s forwards 3s; } .ms-line-point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 58px; height: 130px; transition: height .15s ease .45s; } #ms-download:checked ~ .ms-line-point { height: 60px; } #ms-download:checked ~ .ms-line-point:before { transform: rotate(90deg); right: -10px; animation: ms-check-right .25s forwards 3s; } #ms-download:checked ~ .ms-line-point:after { transform: rotate(-90deg); left: -10px; animation: ms-check-left .25s forwards 3s; } .ms-line-point:before, .ms-line-point:after { content: ''; position: absolute; width: 10px; height: 75px; bottom: -10px; background: #FFFFFF; border-radius: 50px; transition: transform .15s ease .47s, left .15s ease .47s, right .15s ease .47s; } .ms-line-point:before { right: 0px; transform: rotate(45deg); } .ms-line-point:after { left: 0px; transform: rotate(-45deg); } @keyframes ms-bounce { 0% { top: -20px; } 25% { top: -250px; } 50% { top: -275px; } 100% { top: -190px; } } @keyframes ms-check-left { 0% { transform: rotate(-90deg); left: -10px; height: 75px; } 100% { transform: rotate(-45deg); left: 0px; height: 45px; } } @keyframes ms-check-right { 0% { transform: rotate(90deg); right: -10px; height: 75px; bottom: -10px; } 100% { transform: rotate(45deg); right: 10px; height: 80px; bottom: -15px; } } @keyframes ms-border-fill { 0% { border: 10px solid transparent; } 100% { border: 10px solid #FFFFFF; } }
35
Download Animation
By:
rald_dev
.loader { border: 8px; border-top: 4px dotted #FF0035; border-radius:50%; width: 120px; height: 120px; animation: spin 3s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 0% {background-color:#FF0035 ; opacity: 0.2;} 30% {background-color:white; opacity: 1.0;} 70% {background-color:white; opacity: 1.0;} 100% {background-color: #FF0035; opacity: 0.2;} } }
35
Red loading animation
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; }
35
Navigation Menu
By:
rald_dev
Previous
1
2
3
4
5
…
16
Next