Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
Hello World
Hello World
Hello World
Hello World
*{ box-sizing: border-box; margin: 0; padding: 0; } body{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: #222; } .btn{ --light-color: rgb(69, 252, 151); margin: 1rem; position:relative; appearance: none; border: none; color: rgb(209, 208, 208); padding: 1rem 2rem; background-color: #3e3e3e; z-index: 2; overflow: hidden; border-radius: .4rem; box-shadow: .5rem .5rem .5rem #0005; transition: .3s; } .btn::before{ position: absolute; width: 10rem; height: 10rem; background: rgb(2,0,36); background: linear-gradient(90deg, transparent 0%, transparent 14%, transparent 35%, var(--light-color) 80%, var(--light-color) 100%); content: ''; top: 50%; left: 50%; transform-origin: bottom center ; transform: translate(-50%, -100%) ; z-index: -3; border-radius: 100%; animation: button_light_effect 5s linear infinite; } .btn_orange::before{animation-delay:.1s;} .btn_blue::before{animation-delay:.3s;} .btn_yellow::before{animation-delay:.6s;} .btn::after{ position: absolute; width: calc(100% - .3rem); height: calc(100% - .3rem); background-color: #3e3e3e; content: ''; top: 50%; left: 50%; border-radius: .4rem; transform: translate(-50%, -50%); z-index: -3; transition: 1s ; } .btn:hover{ transform:scale(1.2); } .btn:hover, .btn:hover::after { cursor: pointer; background: #55606a; } .btn:hover::before{ animation-duration: .5s; } .btn_orange{--light-color:rgb(255, 166, 0);} .btn_blue{--light-color:rgb(0, 183, 255);} .btn_yellow{--light-color:rgb(235, 255, 16);} .btn_pink{--light-color:rgb(255, 0, 200);} @keyframes button_light_effect { 0%{transform: translate(-50%, -100%) rotate(-180deg);} 100%{transform: translate(-50%, -100%) rotate(180deg);} }
21
Animated Button
By:
rald_dev
body{ margin:0; padding:0; background:#262626; } .pulse{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; background:#58ea00; border-radius:50%; } .pulse .fas{ color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(90deg); font-size:7em; } .pulse:before, .pulse:after{ content:''; display:block; position:absolute; border:50%; border:1px solid #58ea00; top:-20px; left:-20px; right:-20px; bottom:-20px; border-radius:50%; animation:animtephone 1.5s linear infinite; opacity:0; } .pulse:after{ animation-delay:0.5s; } @keyframes animtephone{ 0%{ transform:scale(0.5); opacity:0; } 50%{ opacity:1; } 100%{ transform:scale(1.2); opacity:0; } }
21
Ringing call pluse animation
By:
rald_dev
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); } }
20
Bouncing ball
By:
rald_dev
* { 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; } }
20
Mouse Scroll Down Animation
By:
rald_dev
#square { width: 100px; height: 100px; background: red; -webkit-animation: super-rainbow 15s infinite alternate linear; -moz-animation: super-rainbow 15s infinite alternate linear; } @-webkit-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } @-moz-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } }
20
Rainbow Box
By:
rald_dev
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); } }
20
Pencil 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); }
20
Growing Flower Plant Animation
By:
rald_dev
body{ background: #111; display: flex; height: 100vh; place-content: center; align-items: center; } .wrapper { background: #fff; position: relative; } .wrapper #motion-demo { offset-path: path("M 0 0 m 0 -37.5 a 37.5 37.5 90 1 0 0 75 a 37.5 37.5 90 1 0 0 -75"); animation: move infinite cubic-bezier(.71,.54,.26,.8); width: 6px; height: 6px; border-radius: 10px; position: absolute; } #motion-demo:nth-of-type(1) { background: #bada55; animation-duration: 1.2s; animation-delay: .1s; } #motion-demo:nth-of-type(2) { background: dodgerblue; animation-duration: 1.2s; animation-delay: .2s; } #motion-demo:nth-of-type(3) { background: springgreen; animation-duration: 1.1s; animation-delay: .3s; } #motion-demo:nth-of-type(4) { background: orangered; animation-duration: 1s; animation-delay: .4s; } #motion-demo:nth-of-type(5) { background: orange; animation-duration: 1s; animation-delay: .45s; } #motion-demo:nth-of-type(6) { background: violet; animation-duration: 1s; animation-delay: .5s; } #motion-demo:nth-of-type(7) { background: orangered; animation-duration: 1s; animation-delay: .55s; } #motion-demo:nth-of-type(8) { background: orange; animation-duration: 1s; animation-delay: .6s; } @keyframes move { 0% { offset-distance: 0%; } 50%{ opacity: 0.5; } 100% { offset-distance: 100%; } }
20
Rainbow Loader Animation
By:
rald_dev
When I just noticed, it was love.
html, body { background: linear-gradient(to top right, #9c27b0, #ec407a); height: 100%; margin: 0px; padding: 0px; } h1 { font-family: 'Barrio', cursive; text-align: center; color: #fff; margin:0px; padding-top: 50px; } .centerHeart { display: flex; justify-content: center; align-items: center; } .heart { background: #fff; width: 100px; height: 100px; top: 100px; position: relative; border-radius: 0 0 10px 0; transform: rotate(45deg); animation: pulse .7s infinite alternate; } .heart::before, .heart::after { content: ""; background: #fff; width: 100px; height: 100px; border-radius: 50%; position: absolute; } .heart::before { top:-50px; } .heart::after { left:-50px; } @keyframes pulse { 50% { transform: rotate(45deg) scale(1.2); } }
19
Pulsating heart
By:
rald_dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; align-items: center; min-height: 100vh; display: flex; } .box-outer { overflow: hidden; margin: 50px auto; width: 200px; height: 200px; } .main_box { width: 200px; height: 200px; position: relative; background: #f34c4c; border: 5px solid #ffffff; } .bar { position: absolute; width: 50px; height: 5px; background: rgb(0, 0, 0); transition: all 1s linear; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; } .bar.delay { animation-delay: 0.5s; } .top { top: -5px; left: -5px; } .right { top: 18px; right: -28px; transform: rotate(90deg); } .bottom { bottom: -5px; left: -5px; } .left { top: 18px; left: -28px; transform: rotate(90deg); } @-webkit-keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } @keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } .top, .bottom { animation-name: h-move; } @-webkit-keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } @keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } .right, .left { animation-name: v-move; }
19
Box border animation
By:
rald_dev
body { background: #0a3f63; margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container { height: 250px; width: 250px; position: relative; } .circle { position: absolute; height: 100%; width: 100%; border-radius: 50%; animation: rotate 3s linear infinite; } .circle::before { content: ""; position: absolute; height: 10px; width: 50px; background-color: #fff; border-radius: 5px; top: -6px; left: 50%; transform: translateX(-50%); } .ball { position: absolute; height: 35px; width: 35px; border-radius: 50%; background-color: #fe95ff; top: 20px; left: 50%; transform: translateX(-50%); animation: move 1.5s ease-in alternate infinite; } @keyframes rotate { from { } to { transform: rotate(360deg); } } @keyframes move { from { box-shadow: 0 10px 0 -1px #fe95ffaa, 0 20px 0 -2px #fe95ffaa; } to { top: 220px; box-shadow: 0 -10px 0 -1px #fe95ffaa, 0 -20px 0 -2px #fe95ff55; } }
19
Bouncing ball v2
By:
rald_dev
body{ background:#133; } .container{ width:200px; height:200px; margin:10px auto; background:; } #flame-1{ height:95px; width:95px; background:#ff7200; position:relative; top:52px; left:2px; margin:30px 70px; border-radius:0% 50% 70% 50%; transform:rotateZ(45deg) scale(1.1); filter: drop-shadow(0 0 10px #d43322); animation:scale-alternate 2s ease-in-out infinite; } #flame-2{ height:75px; width:75px; background:#ef5a00; position:relative; top:162px; left:-20px; margin:30px 70px; border-radius:0% 40% 60% 40%; transform:scaleX(0.8) rotatez(45deg); filter: drop-shadow(0 0 10px #d43322); animation: scale-up 2s ease-in-out infinite; } #flame-3{ height:75px; width:75px; background:#ef5a00; position:relative; top:-60px; left:50px; margin:30px 70px; border-radius:0% 40% 60% 40%; transform:scaleX(0.8) rotatez(45deg); filter: drop-shadow(0 0 10px #d43322); animation: scale-up-3 3s ease-in-out infinite; } .wood{ width:20px; height:120px; background:#563111; border-radius:5px; } #wood-1{ transform:rotate(72deg); position:relative; top:-220px; left:117px; } #wood-2{ transform:rotate(106deg); position:relative; top:-340px; left:115px; } .small-element{ height:20px; width:20px; border-radius:50%; background: #ef5a00; position:relative; top:-130px; left:110px; } #small-element-1{ animation: particle-up 3.5s ease-in-out infinite; } #small-element-2{ animation: particle-up 3s ease-in-out infinite; } .fire-bottom .main-fire { position: relative; top: -190px; left: 90px; width: 55px; height: 55px; background-color: #ff7800; transform: scaleX(0.8) rotate(45deg); border-radius: 0 40% 100% 40%; filter: blur(8px); animation: glow 2s ease-out 0; animation-iteration-count: infinite; animation-fill-mode: both; } @keyframes glow{ 0%,100%{ background:#ef5a00; } 50%{ background:#ff7800; } } @keyframes scale-up-3{ 0%,100%{ transform:scale(1.1) rotatez(45deg); } 40%,90%{ transform:scale(0.96) rotatez(45deg); } 30%,75%{ transform:scale(0.90) rotatez(45deg); } } @keyframes scale-up{ 0%,100%{ transform:scale(1) rotatez(45deg); } 40%,90%{ transform:scale(0.96) rotatez(45deg); } 30%,75%{ transform:scale(0.90) rotatez(45deg); } } @keyframes scale-alternate{ 0%,100%{ transform:scale(1.1) rotatez(45deg); } 30%,90%{ transform:scale(0.90) rotatez(45deg); } 45%,60%{ transform:scale(0.96) rotatez(45deg); } 50%,75%{ transform:scale(0.97) rotatez(45deg); } } @keyframes particle-up{ 0%{ top:-130px; left:110px; } 100%{ position:relative; opacity:0.8; top:-270px; left:145px; transform:scale(0.1); } }
19
Fire Animation
By:
rald_dev
Previous
1
…
5
6
7
8
Next