Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; } body { margin: 0; padding: 0; } .loader { width: 100%; height: 100%; background-color: #f0f0f0; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .loader-container { width: 120px; height: 120px; } .loader-block { width: 16px; height: 16px; background-color: #ff2d37; border-radius: 3px; margin-right: 10px; margin-bottom: 10px; position: relative; float: left; animation: wave 1.5s infinite; } .loader-block:nth-child(4n + 2) { animation-delay: 0.2s; } .loader-block:nth-child(4n + 3) { animation-delay: 0.4s; } .loader-block:nth-child(4n + 4) { animation-delay: 0.6s; } /* Create a wave animation */ @keyframes wave { 0% { top: 0; opacity: 1; } 50% { top: 30px; opacity: 0.2; } 100% { top: 0; opacity: 1; } }
76
Wavy Preloader Animation
By:
pixeldev
Green Button
Pink Button
Red Button
Orange Button
Blue Button
Green button
Pink button
Red button
Orange button
Blue button
/* BY ESTEBAN MAUVAIS [--=INDEX=--] /BODY /GRADIENTS /GREEN /PINK /RED /ORANGE /BLUE /BASE BUTTON /ROTATE [--=END INDEX=--] */ /*BODY*/ body { font-family: 'Roboto', sans-serif; } body, .button:after { background: #2c3e50; } .ctn { display: block; margin: auto; text-align: center; } footer { position: fixed; bottom: 5px; right: 5px; color: #FFF; } footer a, footer a:after { font-size: 1em !important; } /*END BODY*/ /*GRADIENTS*/ /*GREEN*/ .b-green, .b-green:before { background: rgba(73,155,234,1); background: -moz-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(26,188,156,1))); background: -webkit-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -o-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -ms-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 ); } /*PINK*/ .b-pink, .b-pink:before { background: rgba(231,72,234,1); background: -moz-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,72,234,1)), color-stop(100%, rgba(75,26,188,1))); background: -webkit-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -o-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -ms-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 ); } /*RED*/ .b-red, .b-red:before { background: rgba(234,110,72,1); background: -moz-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(234,110,72,1)), color-stop(100%, rgba(188,26,99,1))); background: -webkit-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -o-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -ms-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 ); } /*ORANGE*/ .b-orange, .b-orange:before { background: rgba(255,193,7,1); background: -moz-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,193,7,1)), color-stop(100%, rgba(255,87,34,1))); background: -webkit-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -o-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -ms-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 ); } /*BLUE*/ .b-blue, .b-blue:before { background: rgba(5,118,255,1); background: -moz-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(5,118,255,1)), color-stop(100%, rgba(36,248,255,1))); background: -webkit-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 ); } /*END GRADIENTS*/ /*BASE BUTTON*/ .button { display: inline-block; position: relative; border-radius: 3px; text-decoration: none; padding: .5em; margin: .5em; font-size: 2em; font-weight: bold; transition: all .5s; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .button:hover { text-shadow: 0px 0px 0px rgba(255, 255, 255, .75); } .button:hover:after { left: 100%; top: 100%; bottom: 100%; right: 100%; } .button:before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; border-radius: 5px; transition: all .5s; } .button:after { content: ''; display: block; position: absolute; left: 2px; top: 2px; bottom: 2px; right: 2px; z-index: -1; border-radius: 5px; transition: all .5s; } .button2 { display: inline-block; font-size: 2em; margin: .5em; padding: .5em; border-radius: 5px; transition: all .5s; filter: hue-rotate(0deg); color: #FFF; text-decoration: none; } /*END BASE BUTTON*/ /*ROTATE*/ .rot-360-noscoop:hover { filter: hue-rotate(360deg); transform: rotate(360deg); } .rot-135:hover { filter: hue-rotate(135deg); } .rot-90:hover { filter: hue-rotate(90deg); } /*END ROTATE*/
76
Gradient Button with Animation
By:
pixeldev
* { 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); } }
75
8 Pre loader animation using css
By:
pixeldev
.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;} } }
74
Red loading animation
By:
pixeldev
header
nav
section
/* Note: This example only works with Windows Insider Preview Builds 16237+ or the Fall Creators Update. */ body { font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif; display: grid; grid-template-areas: "header header header" "nav section aside" "footer footer footer"; grid-template-rows: 80px 1fr 50px; grid-template-columns: 15% 1fr 18%; grid-gap: 5px; height: 100vh; margin: 10px; } header { background: #707070; grid-area: header; } nav { background: #C9BFBF; grid-area: nav; } section { background: #ABABAB; grid-area: section; } aside { background: #C9C9C9; grid-area: aside; } footer { background: #707070; grid-area: footer; } header, nav, section, aside, footer { padding: 5px; }
72
CSS Grid Layout
By:
pixeldev
CSS3 loading animation.
Simple.
Clear.
Pure.
Simple.
* { font-family: 'Roboto',sans-serif; } h1, p { text-align: center; font-weight: 300; } h1 { font-size: 2em; } .word-spinner { font-size: 2em; height: 2em; line-height: 2em; overflow: hidden; } .word-spinner > span { display: block; } .word-spinner > span { position: relative; display: block; text-align: center; top: -100%; animation: wordspin 5s infinite; -webkit-animation: wordspin 5s infinite; } /* spinning animation */ @keyframes wordspin { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } @-webkit-keyframes wordspin /*Safari and Chrome*/ { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } /* loader div */ #loader2 { width: 16em; height: 16em; margin: 6em auto 6em auto; font-size: 12px; background-color: white; border-left: 1.6em solid #3399FF; border-right: 1.6em solid #3399FF; border-top: 1.6em solid transparent; border-bottom: 1.6em solid transparent; border-radius: 100%; -webkit-border-radius: 100%; animation: loader 1s infinite; -webkit-animation: loader 1s infinite; } /* spinning animation */ @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes loader /*Safari and Chrome*/ { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .ownlink { color: #3399FF; text-decoration: none; font-style: italic; }
72
Loading Animation v2
By:
pixeldev
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; }
72
Button Hover
By:
pixeldev
button
Hover
APPLY
Try For Free
Let's Try Now
.flex{ display:flex; flex-wrap:wrap; justify-content: center; } .btn{ padding: 20px; } /* 1 button styles*/ .button { border: 2px solid black; border-radius: 7px; padding:5px 25px; text-decoration: none; display: inline-block; line-height:1.6; background: linear-gradient(to right, black 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out; } .button:hover { background-position: left bottom; } .text { text-align: center; font-size: 20px; line-height: 1.6; color: black; transition: all .5s ease-out; } .text:hover { color: white; } /* 2 button styles*/ .button-an { display: inline-block; border-radius: 7px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 16px; padding: 15px 25px; width:75px; transition: all 0.5s; cursor: pointer; } .button-an span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button-an span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button-an:hover span { padding-right: 25px; } .button-an:hover span:after { opacity: 1; right: 0; } /*3 btn styles*/ .primary-btn { text-decoration:none; width: 150px; position: relative; display: inline-block; border-radius: 30px; background-color: transparent; color: #212490; text-align: center; font-size: 18px; font-weight:600; padding: 12px 0; transition: all 0.3s; padding-right: 30px; box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.06); border: 1px solid #212490; } .primary-btn .btn-icon { background-color: #212490; width: 80px; height: 45px; float: right; position: absolute; border-radius: 30px 30px 30px 0; right: 0px; top: 0px; transition: all 0.3s; } .btn-text { position: relative; z-index: 9999; } .btn-icon::after { content: ""; width: 0; height: 0; border-top: 45px solid #fff; border-right: 35px solid transparent; position: absolute; top: 0px; left: 0px; } .primary-btn:hover .btn-icon { width: 100%; border-radius: 30px; } .primary-btn:hover .btn-icon::after { display: none; opacity: 0.1; } .btn-icon i { position: absolute; right: 25px; top: 12px; color: #fff; } .primary-btn:hover { color: #fff!important; text-decoration:none; } /*4 button styles*/ .st-btn_main:focus,.st-btn_main:hover{ text-decoration:none; } .st-btn_main{ padding:0 27px; height:49px; display:inline-flex; justify-content:center; align-items:center; font-size:14px; font-weight:600; text-transform:capitalize; border-radius:7px; overflow:hidden; transform:translateZ(0); color:white; } .st-btn_main:before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:450px; height:450px; margin:auto; background:#471fac; border-radius:50%; border:40px solid #0a064c; z-index:2; transform-origin:top center; transform:translateX(-50%) translateY(-5%) scale(.4); transition:transform .8s,border .7s; } .st-btn_main:after{ content:''; position:absolute; top:1px; right:1px; bottom:1px; left:1px; background:#E49349; border-radius:inherit; transform-origin:bottom center; transform:translateZ(0);overflow:hidden; } .st-btn_main p{ display:inline-block; overflow:hidden; } .st-btn_main p span{ position:relative; display:inline-block; transform:translateZ(0); z-index:3; } .st-btn_main:hover:before{ transform:translateX(-45%) translateY(0) scale(1); transform-origin:bottom center; border:60px solid #0a064c; transition:border .8s,-webkit-transform .9s; transition:transform .9s,border .8s; } /* 5 btn styles */ .glow-on-hover { padding: 15px 25px; text-decoration: none; border: none; outline: none; display: inline-block; color: #fff; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 100px; } .glow-on-hover:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 100px; } .glow-on-hover:active { color: #000 } .glow-on-hover:active:after { background: transparent; } .glow-on-hover:hover:before { opacity: 1; } .glow-on-hover:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 100px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } @keyframes wobble{0%{transform:skewX(0deg)}25%{transform:skewX(10deg)}50%{transform:skewX(0deg)}75%{transform:skewX(-10deg)}100%{transform:skewX(0deg)}}
71
Animation: Buttons Hover
By:
pixeldev
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; }
71
Navigation Menu
By:
pixeldev
body { margin: 0; padding: 0; box-sizing: border-box; background: dodgerblue; } .line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 3px solid white; animation: line 2s linear infinite; height: 50px; width: 500px; } .hexagon { position: absolute; width: 80px; height: 50px; background: #fff; left: 0; bottom: 20px; animation: linee 2s linear infinite; } .hexagon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: rotate(60deg); } .hexagon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: rotate(-60deg); } @keyframes linee { 0% { transform: rotate(0deg); left: 0; } 50% { transform: rotate(360deg); left: 420px; } 100% { transform: rotate(0deg); left: 0; } } @keyframes line { 0% { transform: translate(-50%, -50%) rotate(30deg); } 25% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(-30deg); } 75% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(30deg); } }
71
Sliding Hexagon Loading Animation – Pure Css Tutorials – Css Animation Effects
By:
pixeldev
HOME
BAKERY
Cake
Bread
Patisserie
ORDER
CONTACT
/*------------------- Reset browser CSS -------------------*/ * { padding: 0px; margin: 0px; border: 0 none; box-sizing: border-box; } body { width: 100%; height: 100%; min-height: 400px; background-color: #ffffff; font-family: 'Josefin Sans', Arial, sans-serif; font-style: normal; } /*--------------------- Header Styling ---------------------*/ /* header container */ header { position: relative; height: 100px; width: 100%; min-width: 800px; background: #cbf3f0; } /* navbar container */ #mainmenu-navbar { position: absolute; bottom: 0px; right: 0px; margin-right: 15px; } /* navbar items */ .main-menu.tab > li { list-style: none; display: inline-block; position: relative; min-width: 150px; padding: 0.5em; margin: 0px 5px; font-size: 16pt; text-align: center; text-transform: uppercase; line-height: 1.3em; } /* submenu container */ .dropdown.container { display: none; } /*------------------ Navbar Text ------------------*/ a { text-decoration: none; } .main-menu.tab a { color: #2ec4b6; } .dropdown.container a { color: #ffffff; font-weight: 300; text-transform: capitalize; } /*------------------- Hover Styles -------------------*/ /* main menu items */ .main-menu.tab > li:hover > a { color: #26a195; } /* submenu title */ li.dropdown.tab:hover > a { color: #cbf3f0; } /* submenu title background */ .dropdown.tab:hover { background: #26a195; } /* submenu container */ .dropdown.tab:hover .dropdown.container { display: block; position: absolute; top: 2.3em; /* 1.3em + 2 * 0.5em */ left: 0px; margin-top: -1px; padding: 1em 0em; background: #2ec4b6; } /* submenu items */ .dropdown.tab:hover li { list-style: none; line-height: 1em; text-align: left; padding: 0.5em; min-width: 150px; } /* submenu item highlight */ .dropdown.container > li:hover { background: #ff9f1c; } /**** end of header styling ****/
71
Header navigation menu with dropdown on hover (pure CSS)
By:
pixeldev
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; }
70
Bouncing text
By:
pixeldev
Previous
1
2
3
4
5
6
…
24
Next