Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
body{ background: #1d1e22; } .container{ width: 20px; position: relative; margin: auto; top: 20vh; } .ball{ --radius: calc(200px + var(--n)*10px); top: var(--radius); transform-origin: 0 calc(-1 * var(--radius)); position: absolute; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #000; background: #ffad4a; animation: oscillation calc(60s / (50 + var(--n))) ease-in-out infinite alternate; } .ball::before{ content: ""; position: absolute; top: calc(-1*var(--radius)); left: 50%; transform: translate(-50%); width: 1px; height: var(--radius); background: black; } .ball1{--n:1}.ball2{--n:2}.ball3{--n:3}.ball4{--n:4}.ball5{--n:5}.ball6{--n:6}.ball7{--n:7}.ball8{--n:8}.ball9{--n:9}.ball10{--n:10}.ball11{--n:11}.ball12{--n:12}.ball13{--n:13}.ball14{--n:14}.ball15{--n:15} @keyframes oscillation { from { transform: rotate(20deg); } to{ transform: rotate(-20deg); } }
87
Pendulum Wave
By:
rald_dev
.loader { position: relative; width: 54px; height: 54px; border-radius: 10px; } .loader div { width: 8%; height: 24%; background: rgb(128, 128, 128); position: absolute; left: 50%; top: 30%; opacity: 0; border-radius: 50px; box-shadow: 0 0 3px rgba(0,0,0,0.2); animation: fade458 1s linear infinite; } @keyframes fade458 { from { opacity: 1; } to { opacity: 0.25; } } .loader .bar1 { transform: rotate(0deg) translate(0, -130%); animation-delay: 0s; } .loader .bar2 { transform: rotate(30deg) translate(0, -130%); animation-delay: -1.1s; } .loader .bar3 { transform: rotate(60deg) translate(0, -130%); animation-delay: -1s; } .loader .bar4 { transform: rotate(90deg) translate(0, -130%); animation-delay: -0.9s; } .loader .bar5 { transform: rotate(120deg) translate(0, -130%); animation-delay: -0.8s; } .loader .bar6 { transform: rotate(150deg) translate(0, -130%); animation-delay: -0.7s; } .loader .bar7 { transform: rotate(180deg) translate(0, -130%); animation-delay: -0.6s; } .loader .bar8 { transform: rotate(210deg) translate(0, -130%); animation-delay: -0.5s; } .loader .bar9 { transform: rotate(240deg) translate(0, -130%); animation-delay: -0.4s; } .loader .bar10 { transform: rotate(270deg) translate(0, -130%); animation-delay: -0.3s; } .loader .bar11 { transform: rotate(300deg) translate(0, -130%); animation-delay: -0.2s; } .loader .bar12 { transform: rotate(330deg) translate(0, -130%); animation-delay: -0.1s; }
87
Loader
By:
pixeldev
Front
body{ width: 1366px; height:1366px; background:; } .first{ width: 475px; height: 217px; background: green; transform: rotate(90deg) rotateX(90deg) rotateZ(0deg) translate3d(4px,0px,-87px); overflow: hidden; visibility: hidden; position: absolute; transition: all 0.5s ease; } .first2{ width: 475px; height: 217px; background: green; transform: rotate(90deg) rotateX(90deg) rotateZ(0deg) translate3d(4px,0px,-238px); overflow: hidden; visibility: hidden; position: absolute; transition: all 0.5s ease; } .second{ width: 500px; height: 216px; background: red; transform: rotate(-60deg); overflow: hidden; } .third{ width: 500px; height: 216px; background:orange; background-position: center; background-size: 80%; transform: rotate(-60deg); overflow: hidden; visibility: visible; } .sides{ width: 150px; height: 125px; background: gray; position: absolute; } .s1{ transform: rotateX(60deg) translate3d(0px,31px,-162px); background: red; } .sides.s2 { transform: rotateX(-60deg)translate3d(0px, 31px, -54px); background: blue; } .s3{ transform: rotateX(60deg) translate3d(0px, 32px, 54px); background: green; } .s4{ transform: rotateX(-60deg) translate3d(0px, 32px, 161px); background: #9C27B0; } .s5{ background: gray; transform: translate3d(0px, 62px, 108px); } .s6{ background: darkgray; } .sides.S6{ transform: translate3d(0px, 62px, -109px); } @keyframes rotate{ 0%{transform: rotateY(0deg) rotateX(0deg) ;} 100%{transform: rotateY(360deg) rotateX(360deg);} } .main{ width: 250px; height: 250px; perspective: 800px; } .cube{ width: 150px; height: 250px; margin-left: 250px; background:; transform-style: preserve-3d; transform: rotateY(70deg); animation: rotate 15s linear infinite; }
87
3D Hexagon Animation
By:
rald_dev
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)}}
86
Animation: Buttons Hover
By:
rald_dev
body { background-color:black; } #animation-container { height:100px; width:100px; position:relative; } #glowstick { background-color:deeppink; height:30px; width:1px; position:absolute; top:20%; left:50%; opacity:0; -webkit-transform-origin:bottom center; transform-origin:bottom center; -webkit-animation:spin 1.2s infinite; animation:spin 1.2s infinite; box-shadow:-3px 0px 20px 1px deeppink; } @-webkit-keyframes spin { 50% { opacity:1; } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 50% { opacity:1; } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
86
Glow Loader
By:
rald_dev
Simple CSS loaders
single html element css animation
.loader { --color: white; --size-mid: 6vmin; --size-dot: 1.5vmin; --size-bar: 0.4vmin; --size-square: 3vmin; display: block; position: relative; width: 50%; display: grid; place-items: center; } .loader::before, .loader::after { content: ''; box-sizing: border-box; position: absolute; } /** loader --1 **/ .loader.--1::before { width: var(--size-mid); height: var(--size-mid); border: 4px solid var(--color); border-top-color: transparent; border-radius: 50%; animation: loader-1 1s linear infinite; } .loader.--1::after { width: calc(var(--size-mid) - 2px); height: calc(var(--size-mid) - 2px); border: 2px solid transparent; border-top-color: var(--color); border-radius: 50%; animation: loader-1 0.6s linear reverse infinite; } @keyframes loader-1 { 100% { transform: rotate(1turn); } } /** loader --2 **/ .loader.--2::before, .loader.--2::after { width: var(--size-dot); height: var(--size-dot); background-color: var(--color); border-radius: 50%; opacity: 0; animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite; } .loader.--2::after { animation-delay: 0.3s; } @keyframes loader-2 { 0%, 80%, 100% { opacity: 0; } 33% { opacity: 1; } 0%, 100% { transform: translateX(-4vmin); } 90% { transform: translateX(4vmin); } } /** loader --3 **/ .loader.--3::before, .loader.--3::after { width: var(--size-dot); height: var(--size-dot); background-color: var(--color); border-radius: 50%; animation: loader-3 1.2s ease-in-out infinite; } .loader.--3::before { left: calc(50% - 1.6vmin - var(--size-dot)); } .loader.--3::after { left: calc(50% + 1.6vmin); animation-delay: -0.4s; } @keyframes loader-3 { 0%, 100% { transform: translateY(-2.6vmin); } 44% { transform: translateY(2.6vmin); } } /** loader --4 **/ .loader.--4::before { height: var(--size-bar); width: 6vmin; background-color: var(--color); animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite; } @keyframes loader-4 { 0%, 44%, 88.1%, 100% { transform-origin: left; } 0%, 100%, 88% { transform: scaleX(0); } 44.1%, 88% { transform-origin: right; } 33%, 44% { transform: scaleX(1); } } /** loader --5 **/ .loader.--5::before, .loader.--5::after { height: 3vmin; width: var(--size-bar); background-color: var(--color); animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite; } .loader.--5::before { left: calc(50% - 1vmin); top: calc(50% - 3vmin); } .loader.--5::after { left: calc(50% + 1vmin); top: calc(50% - 1vmin); animation-delay: 0.2s; } @keyframes loader-5 { 0%, 88%, 100% { opacity: 0; } 0% { transform: translateY(-6vmin); } 33% { opacity: 1; } 33%, 88% { transform: translateY(3vmin); } } /** loader --6 **/ .loader.--6::before { width: var(--size-square); height: var(--size-square); background-color: var(--color); top: calc(50% - var(--size-square)); left: calc(50% - var(--size-square)); animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @keyframes loader-6 { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } } /** loader --7 **/ .loader.--7::before, .loader.--7::after { width: var(--size-square); height: var(--size-square); background-color: var(--color); } .loader.--7::before { top: calc(50% - var(--size-square)); left: calc(50% - var(--size-square)); animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } .loader.--7::after { top: 50%; left: 50%; animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @keyframes loader-7 { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } } /** loader --8 **/ .loader.--8::before, .loader.--8::after { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background-color: var(--color); } .loader.--8::before { top: calc(50% + 4vmin); animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite; } .loader.--8::after { opacity: 0; top: calc(50% - 2vmin); animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite; } @keyframes loader-8-1 { 0%, 55%, 100% { opacity: 0; } 0% { transform: scale(0.2); } 22% { opacity: 1; } 33%, 55% { transform: scale(1) translateY(-6vmin); } } @keyframes loader-8-2 { 0%, 100% { opacity: 0; } 33% { opacity: 0.3; } 0% { transform: scale(0); } 100% { transform: scale(4); } } /** loader --9 **/ .loader.--9::before, .loader.--9::after { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background-color: var(--color); animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite; } .loader.--9::before { left: calc(50% - var(--size-dot) - 1.6vmin); } .loader.--9::after { left: calc(50% + 1.6vmin); animation-delay: 0.12s; } @keyframes loader-9 { 0%, 100% { opacity: 0; } 0% { transform: translate(-4vmin, -4vmin); } 66% { opacity: 1; } 66%, 100% { transform: none; } } /** miscs **/ .container { display: grid; grid-template-columns: repeat(3, 18vmin); grid-template-rows: repeat(3, 18vmin); grid-gap: 1vmin; } .item { background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; border-radius: 4px; transition: opacity 0.4s ease; } .container:hover .item { opacity: 0.3; } .container:hover .item:hover { opacity: 1; } .page { margin: auto; } .header { margin-bottom: 4vmin; } .header-title { font-size: 3.75vmin; } .header-subtitle { font-size: 2vmin; text-transform: uppercase; opacity: 0.6; } html, body { display: flex; width: 100%; height: 100%; background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); font-family: 'Noto Sans', sans-serif; color: white; text-align: center; letter-spacing: 0.3px; }
86
Simple CSS loaders
By:
rald_dev
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
html, body { margin: 0px; } header, footer { font-family: Raleway; margin: 0 auto; padding: 5em 3em; text-align: center; background: #555; } header h1 { color: #AAA; font-size: 40px; font-weight: lighter; margin-bottom: 5px; } header span { color: #222; } footer span { color: #AAA; } div.container { font-family: Raleway; margin: 0 auto; padding: 10em 3em; text-align: center; } div.container a { color: #FFF; text-decoration: none; font: 20px Raleway; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0; cursor: pointer; } .red { background: #f44336; } .purple { background: #673ab7; } .indigo { background: #3f51b5; } .blue { background: #2196f3; } .cyan { background: #00bcd4; } .teal { background: #009688; } .green { background: #4caf50; } .lightGreen { background: #8bc34a; } .lime { background: #c0ca33; } .yellow { background: #fdd835; } .amber { background: #ffc107; } .orange { background: #ff9800 } .deepOrange { background: #ff5722; } .brown { background: #795548; } .gray { background: #9e9e9e; } /* Top and Bottom borders go out */ div.topBotomBordersOut a:before, div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px); } div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px); } div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px); } /* Top and Bottom borders come in */ div.topBotomBordersIn a:before, div.topBotomBordersIn a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersIn a:before { top: 0px; transform: translateY(-10px); } div.topBotomBordersIn a:after { bottom: 0px; transform: translateY(10px); } div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after { opacity: 1; transform: translateY(0px); } /* Top border go down and Left border appears */ div.topLeftBorders a:before { position: absolute; top: 0px; left: 0px; width: 2px; height: 0px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:hover:before { height: 100%; } div.topLeftBorders a:hover:after { opacity: 0; top: 100%; } /* Circle behind */ div.circleBehind a:before, div.circleBehind a:after { position: absolute; top: 22px; left: 50%; width: 50px; height: 50px; border: 4px solid #0277bd; transform: translateX(-50%) translateY(-50%) scale(0.8); border-radius: 50%; background: transparent; content: ""; opacity: 0; transition: all 0.3s; z-index: -1; } div.circleBehind a:after { border-width: 2px; transition: all 0.4s; } div.circleBehind a:hover:before { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } div.circleBehind a:hover:after { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.3); } /* Brackets go out */ div.brackets a:before, div.brackets a:after { position: absolute; opacity: 0; font-size: 35px; top: 0px; transition: all 0.3s; } div.brackets a:before { content: '('; left: 0px; transform: translateX(10px); } div.brackets a:after { content: ')'; right: 0px; transform: translateX(-10px); } div.brackets a:hover:before, div.brackets a:hover:after { opacity: 1; transform: translateX(0px); } /* Border from Y to X */ div.borderYtoX a:before, div.borderYtoX a:after { position: absolute; opacity: 0.5; height: 100%; width: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderYtoX a:before { left: 0px; top: 0px; } div.borderYtoX a:after { right: 0px; bottom: 0px; } div.borderYtoX a:hover:before, div.borderYtoX a:hover:after { opacity: 1; height: 2px; width: 100%; } /* Border X get width */ div.borderXwidth a:before, div.borderXwidth a:after { position: absolute; opacity: 0; width: 0%; height: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderXwidth a:before { left: 0px; top: 0px; } div.borderXwidth a:after { right: 0px; bottom: 0px; } div.borderXwidth a:hover:before, div.borderXwidth a:hover:after { opacity: 1; width: 100%; } /* Pull down */ div.pullDown a:before { position: absolute; width: 100%; height: 2px; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullDown a:hover:before { height: 100%; } /* Pull up */ div.pullUp a:before { position: absolute; width: 100%; height: 2px; left: 0px; bottom: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUp a:hover:before { height: 100%; } /* Pull right */ div.pullRight a:before { position: absolute; width: 2px; height: 100%; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRight a:hover:before { width: 100%; } /* Pull left */ div.pullLeft a:before { position: absolute; width: 2px; height: 100%; right: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullLeft a:hover:before { width: 100%; } /* Pull up and down */ div.pullUpDown a:before, div.pullUpDown a:after { position: absolute; width: 100%; height: 2px; left: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUpDown a:before { top: 0px; } div.pullUpDown a:after { bottom: 0px; } div.pullUpDown a:hover:before, div.pullUpDown a:hover:after { height: 100%; } /* Pull right and left */ div.pullRightLeft a:before, div.pullRightLeft a:after { position: absolute; width: 2px; height: 100%; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRightLeft a:before { left: 0px; } div.pullRightLeft a:after { right: 0px; } div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after { width: 100%; } /* Highlight text out */ div.highlightTextOut a { color: rgba(255, 255, 255, 0.3); } div.highlightTextOut a:before, div.highlightTextIn a:before { position: absolute; color: #FFF; top: 0px; left: 0px; padding: 10px; overflow: hidden; content: attr(alt); transition: all 0.3s; transform: scale(0.8); opacity: 0; } div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before { transform: scale(1); opacity: 1; } /* Highlight text in */ div.highlightTextIn a { color: rgba(0, 0, 0, 0.4); } div.highlightTextIn a:before { transform: scale(1.2); }
85
Navigation Animation
By:
rald_dev
*{ margin: 0; box-sizing: border-box; } .box{ height: 80px; width: 100%; border-bottom: 1px solid gray; display: flex; align-items: center; } .item{ height: 60px; width: 60px; border-radius: 50%; background-color: #00005e; animation: move 2s 0s infinite ease-in-out; } section { padding: 10px 20px; width: 100%; background-color: black; } @keyframes move { /* 0%{ transform: translateX(0%); } */ 100%{ transform: translateX(600px); } } .reverse{ animation-direction: reverse; } .alternate{ animation-direction: alternate; } .alternate-reverse{ animation-direction: alternate-reverse; }
84
Simple Slide Animation
By:
rald_dev
body{ margin: 0; padding: 0; background-color: #95d0ff; } .container{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width:350px; height:510px; } .sun{ height: 0; width: 0; position: absolute; top: 50px; left: 20px; } .circle{ height: 44px; width: 44px; position: absolute; top: 3px; left: 3px; background-color: #ff0; border-radius: 50%; } .sunrays{ height: 50px; width: 50px; position: relative; background-color: #ffdd4a; box-shadow: 0 0 20px 3px #ff8, 0 0 80px 10px #ff6; animation: rotate 12s linear infinite; } @keyframes rotate{ 100%{transform: rotate(360deg);} } .sunrays:before{ content: ''; height: 50px; width: 50px; position: absolute; background-color: #ffdd4a; transform: rotate(30deg); } .sunrays:after{ content: ''; height: 50px; width: 50px; position: absolute; background-color: #ffdd4a; transform: rotate(60deg); } .shadow{ position: absolute; width: 110px; height: 14px; border-radius: 50%; background-color: rgba(0, 0, 0,0.1); bottom: 95px; left: 135px; } .pot{ position: absolute; width: 70px; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 60px solid #FF7043; bottom: 104px; left: 125px; z-index: 2; } .pot:before{ position: absolute; content: ''; width: 87px; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 9px solid #F4511E; top: -60px; left: -12px; } .pot:after{ position: absolute; content: ''; width: 110px; height: 18px; top: -78px; left: -20px; border-radius: 5px; background-color: #FF7043; } .water-jar{ position: absolute; width: 40px; height: 55px; background-color: #c5f; border-radius: 5px; bottom: 235px; left: 65px; opacity: 0; box-shadow: inset -9px 0 15px #cc70ff; animation: show 10s linear; } @keyframes show{ 5%{opacity: 1;} 7%{transform: rotate(40deg);} 24%{opacity: 1;} 25%{opacity: 0;} } .water-jar:before{ position: absolute; content: ''; width: 15px; height: 0; left: 40px; top: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 40px solid #c6f; transform: rotate(65deg); } .water-jar:after{ position: absolute; content: ''; width: 20px; height: 30px; top: 5px; left: -20px; border-radius: 20px 0 0 20px; background-color: transparent; border: 5px solid #c5f; box-shadow: 70px -4px 0 -6px #c6f; } .water{ position: absolute; width: 20px; height: 50px; border-radius: 50% 50% 0 0; border-right: 4px dashed #0bf; bottom: 180px; left: 115px; z-index: 1; opacity: 0; animation: water 10s linear; } @keyframes water{ 7%{opacity: 0;} 8%{opacity: 1;} 21%{opacity: 1;} 22%{opacity: 0;} } .water:before{ position: absolute; content: ''; width: 45px; height: 52px; top: -2px; left: -10px; border-radius: 70% 80% 20% 0; border-right: 4px dashed #0bf; z-index: 1; } .water:after{ position: absolute; content: ''; width: 65px; height: 62px; top: -10px; left: -10px; border-radius: 70% 90% 28% 0; border-right: 4px dashed #0bf; z-index: 1; } .flower{ position: absolute; bottom: 180px; left: 0; right: 0; margin: 0 auto; width: 50px; transform: rotate(180deg); } .stem{ position: absolute; left: 25px; width: 5px; height: 0px; background: linear-gradient(-90deg, #0d0, #0a0); animation: grow 10s linear forwards; } @keyframes grow{ 25%{height: 0;} 34%{height: 22px;} 39%{height: 22px;} 41%{height: 27px;} 45%{height: 27px;} 52%{height: 92px;} 55%{height: 94px;} 100%{height: 120px;} } .leaf{ position: absolute; width: 25px; top: -10px; left: 18px; height: 38px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform-origin: bottom; transform: rotate(-110deg); animation: leaf-1 10s linear; } @keyframes leaf-1{ 0%{transform: scaleY(0) rotate(-180deg);} 38%{transform: scaleY(0) rotate(-110deg);} 50%{transform: scaleY(1) rotate(-110deg);} } .leaf:before{ position: absolute; content: ''; top: 18px; left: -33px; width: 30px; height: 45px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform: rotate(110deg); animation: leaf-2 10s linear; } @keyframes leaf-2{ 0%{transform: scaleY(0) rotate(110deg);} 45%{transform: scaleY(0) rotate(110deg);} 52%{transform: scaleY(1) rotate(110deg);} } .leaf:after{ position: absolute; content: ''; top: -20px; left: -60px; width: 25px; height: 35px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform-origin: bottom; animation: leaf-3 10s linear; } @keyframes leaf-3{ 0%{transform: scaleY(0);} 55%{transform: scaleY(0);} 72%{transform: scaleY(1);} } .dot{ position: absolute; top: 147px; left: 24px; height: 15px; width: 15px; border-radius: 50%; background-color: #f8d545; box-shadow: 0 0 0 4px #d85, 0 0 8px 4px #444, inset 0 0 8px #fd0; opacity: 0; animation: flower 10s linear forwards; } @keyframes flower{ 72%{opacity: 0;} 74%{opacity: 1;} 100%{opacity: 1;} } .petal{ position: absolute; width: 0px; height: 40px; border-radius: 100% 0% 50% 50% /50% 0% 100% 50%; background: linear-gradient( 185deg, #941346 0%, #E63B94 50%, #FF5AB0 75%, #FF7DC1 100% ); opacity: 0; animation: petal 10s linear forwards; } @keyframes petal{ 72%{opacity: 0;} 84%{opacity: 1; width: 40px;} 100%{opacity: 1; width: 40px;} } .petal-1{ top: 155px; left: -9px; } .petal-2{ top: 125px; left: -18px; transform: rotate(60deg); } .petal-3{ top: 105px; left: 5px; transform: rotate(120deg); } .petal-4{ top: 110px; left: 35px; transform: rotate(180deg); } .petal-5{ top: 140px; left: 42px; transform: rotate(240deg); } .petal-6{ top: 160px; left: 18px; transform: rotate(300deg); }
84
Growing Flower Plant Animation
By:
rald_dev
NEWS
.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; }
84
Card Corner Ribbon
By:
pixeldev
Video
09 February 2019
Button - Fluent Design-Like
button
Shot
29 March 2019
Task List
task-list
app
Video
16 April 2019
Radio Buttons
Radio
Video
27 April 2019
User Interface - Flip Card
card
Video
14 July 2019
Link & Button - Shatter Effect
link
button
Video
18 August 2019
Switches
switch
Video
24 August 2019
Modal
modal
Video
26 August 2019
Modals (Modal v2)
modal
Video
29 August 2019
Off-Screen Menu
nav
menu
Video
06 November 2019
Parallax Tilt Effect Cards
card
tilt-effects
Video
11 November 2019
Plant App: Sign Up UI
app
animation
Video
23 December 2019
Block Revealing Effect
text
revealing-effect
dlar_dev-cards
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap'); /* DEFAULTS */ /* ================================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { display: grid; place-content: center; min-height: 100vh; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; } /* CARDS */ /* ================================================================================= */ .cards { display: flex; align-items: center; padding: 40px; overflow-x: scroll; min-height: 100vh; } .card { min-width: 300px; max-width: 300px; height: 400px; margin-left: -80px; border-radius: 40px; padding: 30px; box-shadow: -4px 4px 26px 2px hsla(184, 50%, 20%, .1); background: linear-gradient(to right bottom, hsl(0, 0%, 98%), hsl(0, 0%, 96%)); transition: all .3s; position: relative; } .card:first-child { margin-left: 0; } .card:hover, .card:focus-within { transform: translateY(-20px) } .card:hover+.card, .card:focus-within+.card { transform: translateX(80px); } .card-info { margin-bottom: 14px; } .card-info>span:first-child { margin-right: 6px; } .card-grad--video { color: transparent; background: linear-gradient(to right, hsl(91, 96%, 50%), hsl(159, 96%, 50%)); background-clip: text; } .card-grad--shot { color: transparent; background: linear-gradient(to right, hsl(294, 96%, 50%), hsl(201, 96%, 50%)); background-clip: text; } .card-info>span:last-child { color: hsl(0, 0%, 70%); } .card-heading { font-size: 1.6em; } .card-heading a:link { color: hsl(30, 50%, 40%); font-weight: bold; text-decoration: none; } .card-tags { display: flex; position: absolute; bottom: 50px; left: 30px; } .card-tag { color: hsl(0, 0%, 60%); padding: 5px 12px; border: 2px solid hsl(30, 40%, 70%); border-radius: 100px; text-transform: uppercase; margin-right: 10px; font-size: .9em; } /* ABS */ /* ================================================================================= */ .abs-site-link { position: fixed; bottom: 20px; left: 20px; color: hsla(0, 0%, 0%, .6); font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif; }
84
Cards 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;} } }
84
Red loading animation
By:
rald_dev
Previous
1
2
3
4
5
6
…
10
Next