Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
body {background: #222;} /* leaf animations */ #leaves {position:relative;top:-50px;width:100%;text-align: right;} #leaves i { display: inline-block; width: 200px; height: 150px; background: linear-gradient(to bottom right, #309900, #005600); transform: skew(20deg); border-radius: 5% 40% 70%; box-shadow: inset 0px 0px 1px #222; border: 1px solid #333; z-index: 1; -webkit-animation: falling 5s 0s infinite; } #leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; } #leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; } #leaves i:before { position: absolute; content: ''; top: 117px; right: 9px; height: 27px; width: 32px; transform: rotate(49deg); border-radius: 0% 15% 15% 0%; border-top: 1px solid #222; border-bottom: 1px solid #222; border-left: 0px solid #222; border-right: 1px solid #222; background: linear-gradient(to right, rgba(0,100,0,1), #005600); z-index: 1; } #leaves i:after { content: ''; height: 125px; width: 10px; background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0)); display: block; transform: rotate(125deg); position: absolute; left: 85px; border-radius:50%; } #leaves i:nth-of-type(n) { height:23px; width:30px; } #leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; } #leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; } #leaves i:nth-of-type(2n+1) { height:11px; width:16px; } #leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; } #leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; } #leaves i:nth-of-type(3n+2) { height:17px; width:23px; } #leaves i:nth-of-type(3n+2):before { height:4px; width:4px; top:12px; right:1px; } #leaves i:nth-of-type(3n+2):after { height:10px; width:2px; top:1px; left:8px; } #leaves i:nth-of-type(n) { -webkit-animation-delay: 1.9s;} #leaves i:nth-of-type(2n) { -webkit-animation-delay: 3.9s;} #leaves i:nth-of-type(3n) { -webkit-animation-delay: 2.3s;} #leaves i:nth-of-type(4n) { -webkit-animation-delay: 4.4s;} #leaves i:nth-of-type(5n) { -webkit-animation-delay: 5s; } #leaves i:nth-of-type(6n) { -webkit-animation-delay: 3.5s;} #leaves i:nth-of-type(7n) { -webkit-animation-delay: 2.8s;} #leaves i:nth-of-type(8n) { -webkit-animation-delay: 1.5s;} #leaves i:nth-of-type(9n) { -webkit-animation-delay: 3.3s;} #leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;} #leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;} #leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;} #leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s; } #leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;} #leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s; } #leaves i:nth-of-type(n) { background: linear-gradient(to bottom right, #309900, #005600); } #leaves i:nth-of-type(2n+2) { background: linear-gradient(to bottom right, #5e9900, #2b5600); } #leaves i:nth-of-type(4n+1) { background: linear-gradient(to bottom right, #990, #564500); } #leaves i:nth-of-type(n) { opacity: .7;} #leaves i:nth-of-type(3n+1) { opacity: .5;} #leaves i:nth-of-type(3n+2) { opacity: .3;} #leaves i:nth-of-type(n) {transform: rotate(180deg);} #leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;} @-webkit-keyframes falling { 0% { -webkit-transform: translate3d(300,0,0) rotate(0deg); } 100% { -webkit-transform: translate3d(-350px,700px,0) rotate(90deg); opacity: 0; } } @-webkit-keyframes falling3 { 0% { -webkit-transform: translate3d(0,0,0) rotate(-20deg); } 100% { -webkit-transform: translate3d(-230px,640px,0) rotate(-70deg); opacity: 0; } } @-webkit-keyframes falling2 { 0% { -webkit-transform: translate3d(0,0,0) rotate(90deg); } 100% { -webkit-transform: translate3d(-400px,680px,0) rotate(0deg); opacity: 0; } }
45
Falling leaves
By:
pixeldev
Front
Back!
@import 'https://fonts.googleapis.com/css?family=Lily+Script+One'; body { background: #eee; font-family: 'Lily Script One'; } .card { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px; float: left; perspective: 500px; } .content { position: absolute; width: 100%; height: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: transform 1s; transform-style: preserve-3d; } .card:hover .content { transform: rotateY( 180deg ) ; transition: transform 0.5s; } .front, .back { position: absolute; height: 100%; width: 100%; background: white; line-height: 300px; color: #03446A; text-align: center; font-size: 60px; border-radius: 5px; backface-visibility: hidden; } .back { background: #03446A; color: white; transform: rotateY( 180deg ); }
45
Pure CSS Card Flip
By:
pixeldev
.wheel{ border: 2px solid black; border-radius: 50%; margin-left: 50px; position: absolute; width: 55vw; height: 55vw; max-height: 500px; max-width: 500px; animation-name: wheel; animation-duration: 10s;/*Time of the animation*/ animation-iteration-count: infinite;/*How many times the animation repeats*/ animation-timing-function: linear;/*How the animation should progress over time*/ } /********LINES********/ .line{ background-color: black; width: 50%; height: 2px; position: absolute; left: 50%; top: 50%; transform-origin: 0% 0%; } /******Line types*********/ .line:nth-of-type(2){ transform: rotate(60deg); } .line:nth-of-type(3){ transform: rotate(120deg); } .line:nth-of-type(4){ transform: rotate(180deg); } .line:nth-of-type(5){ transform: rotate(240deg); } .line:nth-of-type(6){ transform: rotate(300deg); } /********CABINS**********/ .cabin{ background-color: red; width: 20%; height: 20%; position: absolute; border: 2px solid; transform-origin: 50% 0%; animation: cabins 10s ease-in-out infinite;/*animation-name, animation-duration, animation-timing-function, animation-iteration-count*/ } /*******Cabin types*********/ .cabin:nth-of-type(1){ right: -8.5%; top: 50%; } .cabin:nth-of-type(2){ right: 17%; top: 93.5%; } .cabin:nth-of-type(3){ right: 67%; top: 93.5%; } .cabin:nth-of-type(4){ left: -8.5%; top: 50%; } .cabin:nth-of-type(5){ left: 17%; top: 7%; } .cabin:nth-of-type(6){ right: 17%; top: 7%; } /**********K E Y F R A M E S*************/ @keyframes wheel{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes cabins{ 0%{ transform: rotate(0deg); } 25%{ background-color: yellow; } 50%{ background-color: purple; } 75%{ background-color: yellow; } 100%{ transform: rotate(-360deg); } }
45
Ferris Wheel Animation
By:
pixeldev
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; }
45
Border Animation
By:
pixeldev
NIKE AM90id
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap'); @import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap'); body { background: #1f1a25; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; min-height: 100vh; } img{ position: fixed; top: -8%; left: 0%; border-radius: 50px; opacity:0.9; transition: 0.5s; } h1{ transition: transform 2s; font-size: 60px; color: white; font-family: 'Big Shoulders Display', cursive; } .card:hover > p{ opacity:1; transform: scale(1.5) top:80%; } img:hover .card{ } img, #parent { cursor: pointer; } .card:hover > img{ opacity:1; transform: scale(1.4); } .card header { position:absolute; top: 120%; left: 0%; padding: 1px; border-radius: 25px; width: 450px; height: 90px; transition: all .5s; opacity:0; } .card:hover > header{ opacity:1; width: 450px; height: 90px; transform: translateY(-120px); } .card { transition: transform .7s; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); border-radius: 500px; margin: auto; text-align: center; font-family: arial; background: white; width: 450px; height: 450px; } .card:hover{ transform: scale(1.08) } .centeri{ position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); } span{ position: relative; }
45
Pure CSS | Product Card
By:
pixeldev
body { background: #ddd; } #ball { width: 150px; height: 150px; border-radius: 50%; position: fixed; top: 100px; left: 50%; transform: translate(-50%, -50%); background: #0075c9; background: linear-gradient(to top, #0075c9 0%,#0060a5 10%,#005089 25%,#0060a5 42%,#007fe0 73%,#2f9fef 100%); box-shadow: 0px 100px 100px 0px rgba(0,0,0,0.1); animation-name: bounce; animation-duration: 1.25s; animation-iteration-count: infinite; } @keyframes bounce { 50% { top: 60%; animation-timing-function: ease-out; height: 120px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75); } }
44
Bouncing ball
By:
pixeldev
Hover to open
Surprise!
.codepen-wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; } .book { height: 15rem; width: 15rem; font-size: 1.4rem; box-shadow: 1rem 2rem 3rem rgba(0, 0, 0, 0.25); text-align: center; position: relative; color: #484e4a; } .page { width: 100%; height: 15rem; perspective: 1500px; position: relative; } /* Front of first page */ .page__1 { background-color: #0D5C63; color: #fff; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 1; transition: all 1s 0.3s; transform-origin: 0 50%; z-index: 2; } /* Back of first page */ .page__1::after { content: "Neat, huh?"; color: #eff0eb; position: absolute; padding-top: 1.5rem; top: 0; left: 0; background-color: #424B54; width: 100%; height: 100%; z-index: 1; opacity: 0; transform: rotateY(180deg); transition: all 0.3s 0.5s; } /* Front of second page */ .page__2 { background-color: #BAA898; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 1; } /* Hover effect for flipping the page */ .page:hover .page__1 { transform: rotateY(-180deg); box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, 0.25); } /* Hover effect for back of first page */ .page:hover .page__1::after { opacity: 1; }
44
Pure CSS Card Open Animation
By:
pixeldev
* { 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; } }
44
Mouse Scroll Down Animation
By:
pixeldev
Item 1
Sub item 1
Sub item 2
Sub item 3
Sub item 4
Item 2
Sub item 5
Sub item 6
Sub item 7
Sub item 8
Item 3
Sub item 9
Sub item 10
Sub item 11
Sub item 12
Item 4
Sub item 13
Sub item 14
Sub item 15
Sub item 16
.nav { background: #007; display: block; height: 36px; width: 100%; } .nav > li { display: inline-block; position: relative; } .nav > li > ul { background: #777; display: none; height: auto; position: absolute; top: 36px; width: 200%; } .nav > li:hover > ul { display: block; } .nav > li li { display: block; } a { color: #fff; display: block; padding: 10px 15px; text-decoration: none; } a:hover { background: #A00; }
44
Pure CSS Nav Menu challenge
By:
pixeldev
.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); } }
44
Heart animation
By:
pixeldev
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); } }
44
Pencil animation
By:
pixeldev
Loaders Kit
Single Element pure CSS Spinners & Loaders
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } html{ color: #fff; font-family: 'Source Sans Pro', sans-serif; background-color: #59488b; } h1,h2{ color: rgba(255,255,255,0.5); font-size: 40px; font-weight: 200; text-align: center; margin: 40px 0 0 0; } h2{ font-size: 18px; margin: 0; padding: 0; margin: 10px 0; } h1 span{ font-size: 30px; } a{ text-decoration: none; } a:hover{ transition: all linear 0.2s; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .wrapper{ width: 700px; margin: 0 auto; } .row{ text-align: center; padding: 50px 0; } .span, .span_large{ float: left; width: 100px; background-color: rgba(0,0,0, 0.02); height: 100px; vertical-align: middle; border-radius: 1px; margin-right: 100px; } .span:last-child{ margin-right: 0px; } /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shadow: inset 0px 0px 0px 2px #fff; border-radius: 50%; position: relative; margin: 38px auto;/* Not necessary- its only for layouting*/ } .timer:after, .timer:before{ position: absolute; content:""; background-color: #fff; } .timer:after{ width: 10px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: minhand 2s linear infinite; -moz-animation: minhand 2s linear infinite; animation: minhand 2s linear infinite; } .timer:before{ width: 8px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: hrhand 8s linear infinite; -moz-animation: hrhand 8s linear infinite; animation: hrhand 8s linear infinite; } @-webkit-keyframes minhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes minhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes minhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes hrhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes hrhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes hrhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } /*Typing Loader*/ .typing_loader{ width: 6px; height: 6px; border-radius: 50%; -webkit-animation: typing 1s linear infinite alternate; -moz-animation: Typing 1s linear infinite alternate; animation: typing 1s linear infinite alternate; margin: 46px auto; /* Not necessary- its only for layouting*/ position: relative; left: -12px; } @-webkit-keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } @-moz-keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } @keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } /*Location indicator */ .location_indicator{ margin: 30px auto; position: relative; left: -9px; } .location_indicator:before, .location_indicator:after{ position: absolute; content: ""; } .location_indicator:before{ width: 20px; height: 20px; border-radius: 100% 100% 100% 0; box-shadow: 0px 0px 0px 2px rgba(255,255,255,1); -webkit-animation: mapping 1s linear infinite; -moz-animation: mapping 1s linear infinite; animation: mapping 1s linear infinite; -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); transform: rotate(-46deg); } .location_indicator:after{ width: 30px; height: 10px; border-radius: 100%; left: 44px; background-color: rgba(255, 255, 255, 0.2); top: 24px; z-index: -1; } @-webkit-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } @-moz-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } @-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } /* go in*/ .dashboard{ width: 32px; height: 32px; margin: 30px auto; border: 2px rgba(255,255,255,1) solid; border-radius: 100%; position: relative; overflow: hidden; z-index: 1; } .dashboard:after, .dashboard:before{ position: absolute; content: ""; } .dashboard:after{ width:14px; height: 2px; top: 20px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; background-color: rgba(255,255,255,1); -webkit-animation: dashboard_hand 2s linear infinite alternate; -moz-animation: dashboard_hand 2s linear infinite alternate; animation: dashboard_hand 2s linear infinite alternate; } .dashboard:before{ width: 32px; height: 10px; background-color: rgba(255,255,255,1); top:20px; left: -2px; } @-webkit-keyframes dashboard_hand{ 0%{ -webkit-transform: rotate(-160deg);} 100%{ -webkit-transform: rotate(-20deg);} } @-moz-keyframes dashboard_hand{ 0%{ -moz-transform: rotate(-160deg);} 100%{ -moz-transform: rotate(-20deg);} } @keyframes dashboard_hand{ 0%{ transform: rotate(-160deg);} 100%{ transform: rotate(-20deg);} } /*Battery*/ .battery{ width: 28px; height: 14px; border: 1px #fff solid; border-radius: 2px; position: relative; -webkit-animation: charge 5s linear infinite; -moz-animation: charge 5s linear infinite; animation: charge 5s linear infinite; top: 40px; margin: 0 auto; } .battery:after{ width: 2px; height: 7px; background-color: #fff; border-radius: 0px 1px 1px 0px; position: absolute; content: ""; top: 2px; right: -4px; } @-webkit-keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } @-moz-keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } @keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } .magnifier{ width: 20px; height: 20px; box-shadow: 0px 0px 0px 1px #fff; border-radius: 50%; position: relative; margin: 34px auto; -webkit-animation: magnify 1s linear infinite alternate; -moz-animation: magnify 1s linear infinite alternate; animation: magnify 1s linear infinite alternate; } .magnifier:after, .magnifier:before{ position: absolute; content: ""; } .magnifier:before{ content: "me"; font-size: 12px; left: 2px; text-align: center; top: 2px; } .magnifier:after{ width: 2px; height: 8px; background-color: #fff; bottom: -6px; left: 20px; border-radius: 2px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } @-webkit-keyframes magnify{ 0%{-webkit-transform: scale(1); } 100%{-webkit-transform: scale(1.5);} } @-moz-keyframes magnify{ 0%{-moz-transform: scale(1); } 100%{-moz-transform: scale(1.5);} } @keyframes magnify{ 0%{transform: scale(1); } 100%{transform: scale(1.5);} } /*help*/ .help{ width: 30px; height: 30px; border: 1px #fff solid; border-radius: 50%; -webkit-animation: rotation 1s ease-in-out infinite; -moz-animation: rotation 1s ease-in-out infinite; animation: rotation 1s ease-in-out infinite; margin: 30px auto; } .help:after{ width: 5px; height: 5px; background-color: rgba(255,255,255,1); border-radius: 100%; position: absolute; content: ""; } @-webkit-keyframes rotation{ 0%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);} } @-moz-keyframes rotation{ 0%{-moz-transform: rotate(0deg);} 100%{-moz-transform: rotate(360deg);} } @keyframes rotation{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } /*eye ball*/ .eye{ width: 20px; height: 20px; background-color: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 30px 0px 0px 0px rgba(255,255,255,0.8); position: relative; margin: 36px 26px; } .eye:after{ background-color: #59488b; width: 10px; height: 10px; box-shadow: 30px 0px 0px 0px #59488b; border-radius: 50%; left: 9px; top: 8px; position: absolute; content: ""; -webkit-animation: eyeball 2s linear infinite alternate; -moz-animation: eyeball 2s linear infinite alternate; animation: eyeball 2s linear infinite alternate; } @-webkit-keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } @-moz-keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } @keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } /*coffee cup*/ .coffee_cup{ width: 20px; height: 24px; border: 1px rgba(255,255,255,1) solid; border-radius: 0px 0px 5px 5px; position: relative; margin: 36px auto; } .coffee_cup:after, .coffee_cup:before{ position: absolute; content: ""; } .coffee_cup:after{ width: 5px; height: 12px; border: 1px #fff solid; border-left: none; border-radius: 0px 20px 20px 0px; left: 20px; } .coffee_cup:before{ width: 1px; height: 6px; background-color: rgba(255,255,255,1); top: -10px; left: 4px; box-shadow: 5px 0px 0px 0px rgba(255,255,255,1), 5px -5px 0px 0px rgba(255,255,255,1), 10px 0px 0px 0px rgba(255,255,255,1); -webkit-animation: steam 1s linear infinite alternate; -moz-animation: steam 1s linear infinite alternate; animation: steam 1s linear infinite alternate; } @-webkit-keyframes steam{ 0%{height: 0px;} 100%{height: 6px;} } @-moz-keyframes steam{ 0%{height: 0px} 100%{height: 6px;} } @keyframes steam{ 0%{height: 0px} 100%{height: 6px;} } /*square*/ .square{ width: 20px; height: 20px; border:1px rgba(255,255,255,1) solid; margin: 36px auto; position: relative; -webkit-animation: fill_color 5s linear infinite; -moz-animation: fill_color 5s linear infinite; animation: fill_color 5s linear infinite; } .square:after{ width: 4px; height: 4px; position: absolute; content: ""; background-color: rgba(255,255,255,1); top: -8px; left: 0px; -webkit-animation: square_check 1s ease-in-out infinite; -moz-animation: square_check 1s ease-in-out infinite; animation: square_check 1s ease-in-out infinite; } @-webkit-keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @-moz-keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @-webkit-keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } @-moz-keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } @keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } /*circle classick*/ .circle{ margin: 40px auto; position: relative; width: 8px; height: 8px; background-color: rgba(255,255,255,.5);; box-shadow: -14px 0px 0px rgba(255,255,255,1); border-radius: 50%; -webkit-animation: circle_classic 1s ease-in-out infinite alternate; -moz-animation: circle_classic 1s ease-in-out infinite alternate; animation: circle_classic 1s ease-in-out infinite alternate; } @-webkit-keyframes circle_classic{ 0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);} } @-moz-keyframes circle_classic{ 0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);} } @keyframes circle_classic{ 0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; transform: rotate(360deg) scale(1.2);} } /*cloud*/ .cloud{ margin: 42px 30px; width: 4px; height: 10px; opacity: 0.5; position: relative; box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,1), 18px 0px 0px 0px rgba(255,255,255,1), 24px 0px 0px 0px rgba(255,255,255,1), 30px 0px 0px 0px rgba(255,255,255,1), 36px 0px 0px 0px rgba(255,255,255,1); -webkit-animation: rain 1s linear infinite alternate; -moz-animation: rain 1s linear infinite alternate; animation: rain 1s linear infinite alternate; } .cloud:after{ width: 40px; height: 10px; position: absolute; content: ""; background-color: rgba(255,255,255,1); top: 0px; opacity: 1; -webkit-animation: line_flow 2s linear infinite reverse; -moz-animation: line_flow 2s linear infinite reverse; animation: line_flow 2s linear infinite reverse; } @-webkit-keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @-moz-keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @-webkit-keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } @-moz-keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } @keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } /* Me */ .aboutme{ width: 700px; padding: 50px 0; border-top: 2px rgba(255,255,255,0.03) solid; } .viduthalai{ background: url(../img/viduthalai.png) no-repeat; width: 100px; height: 100px; border-radius: 0 2px 2px 0; float: left; opacity: 0.5; } .viduthalai:hover{ opacity: 1; } .intro{ float: left; width: 400px; padding-left: 20px; color: rgba(255,255,255,0.5); } .intro a{ color: rgba(255,255,255,0.5); } .intro a:hover{ color: rgba(255,255,255,1); } .intro span, p{ font-size: 15px; font-weight: 200; } .intro h3{ font-size: 20px; font-weight: 200; margin: 0px; } .git{ color: rgba(255,255,255,0.5); float: right; text-align: right; padding: 10px 20px; border-radius: 2px; background-color: rgba(0,0,0,0.3); font-weight: 200; } .git:hover{ background-color: rgba(0,0,0,0.2); }
44
Loaders kit
By:
pixeldev
Previous
1
…
6
7
8
9
10
…
24
Next