The Power of Pure CSS - No JavaScript Needed

46

45

Pure CSS using Flexbox CSS Gallery

By: pixeldev

.body{
        display: flex;
        justify-content: center;
        height: 100vh;
        background: #240229;
	}

.loader{
        margin-top:8%; 
        position: relative;
        width: 70%;
        height: 70%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
        animation: animate 0.5s linear infinite;
	}

.loader span{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0); 
        animation: animate 0.5s linear infinite;
	}

.loader span:nth-child(1){
        filter: blur(5px);
	}

.loader span:nth-child(2){
        filter: blur(10px);
	}

.loader span:nth-child(3){
        filter: blur(25px);
	}

.loader span:nth-child(4){
        filter: blur(50px);
	}

.loader:after{
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: #240229;
        border-radius: 5%;
	}

h1{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 12%;
        letter-spacing: 5px;
        color: rgb(196, 146, 230);
        font-family: "Comic Sans MS", cursive, sans-serif;
	}

q{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 20%;
        color: rgb(196, 146, 230); 
        font-family: "Comic Sans MS", cursive, sans-serif;
	}

.glow {
        -webkit-animation-duration: 1s;
        -webkit-animation-name: glow;
        -webkit-animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-name: glow;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    
	}

@-webkit-keyframes glow {
        from { text-shadow: 0 0 0px rgb(196, 146, 230); }
        to { text-shadow: 0 0 20px rgb(196, 146, 230); }
	}

45

Happy birthday banner

By: pixeldev

44

Button – Shadow Pulse Animation

By: pixeldev

44

Flat Preloader

By: pixeldev

body {
  height: 100vh;
}

.cont {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
}

.dots {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  transform: translate(0px,0px);
}

.d1 {
  transform: rotate(0deg) translateX(80px);
  background: #ff7171;
  animation: orbit1 2.5s ease-in-out infinite alternate;
  z-index: 10;
}

.d2 {
  transform: rotate(-90deg) translateX(80px);
  background: #377b37;
  animation: orbit2 2.5s ease-in-out infinite alternate;
  z-index: 8;
}

.d3 {
  transform: rotate(180deg) translateX(80px);
  background: #afaf29;
  animation: orbit3 2.5s ease-in-out infinite alternate;
  z-index: 6;
}

.d4 {
  transform: rotate(90deg) translateX(80px);
  background: #7a5afb;
  animation: orbit4 2.5s ease-in-out infinite alternate;
  z-index: 4;
}

.d5 {
  transform: rotate(135deg) translateX(80px);
  background: #e62575;
  animation: orbit5 2.5s ease-in-out infinite alternate;
  z-index: 5;
}

.d6 {
  transform: rotate(225deg) translateX(80px);
  background: #967e77;
  animation: orbit6 2.5s ease-in-out infinite alternate;
  z-index: 7;
}

.d7 {
  transform: rotate(315deg) translateX(80px);
  background: #d432c7;
  animation: orbit7 2.5s ease-in-out infinite alternate;
  z-index: 9;
}

.d8 {
  transform: rotate(405deg) translateX(80px);
  background: #00bcd4;
  animation: orbit8 2.5s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(360deg) translateX(0px) scale(1.2,1.2);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(-90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(270deg) translateX(0px) scale(1.6,1.6);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(180deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(540deg) translateX(0px) scale(2,2);
  }
}

@keyframes orbit4 {
  0% {
    transform: rotate(90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(450deg) translateX(0px) scale(2.4,2.4);
  }
}

@keyframes orbit5 {
  0% {
    transform: rotate(135deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(495deg) translateX(0px) scale(2.2,2.2);
  }
}

@keyframes orbit6 {
  0% {
    transform: rotate(225deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(585deg) translateX(0px) scale(1.8,1.8);
  }
}

@keyframes orbit7 {
  0% {
    transform: rotate(315deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(675deg) translateX(0px) scale(1.4,1.4);
  }
}

@keyframes orbit8 {
  0% {
    transform: rotate(405deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(765deg) translateX(0px) scale(2.6,2.6);
  }
}

42

Circle(dots) css animation loader

By: pixeldev

body{
	margin: 0;
	padding: 0;
	font-family: 'Abril Fatface', serif;
}

.slider{
	height: 600px;
	background-color: #293132;
	text-align: center;
	position: relative;
	animation: slideColor 10s forwards infinite;
}

.caption{
	line-height: 100px;
	font-size: 60px;
	color: #fff;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	margin-left: -300px;
}

.text-box{
	display: inline-block;
	position: relative;
}

.text-box div{
	display: inline-block;
	position: absolute;
	top: -200px;
	transform: rotateX(-90deg);
	opacity: 0;
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	animation-timing-function: ease;
}

.text-box div:nth-child(1){
	animation: rollDown 10s forwards infinite;
}

.text-box div:nth-child(2){
	animation: rollDown2 10s forwards infinite;
}

.text-box div:nth-child(3){
	animation: rollDown3 10s forwards infinite;
}

@keyframes rollDown {
	0%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	11%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	22%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	33%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown2 {
	33%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	44%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	55%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	66%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown3 {
	66%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	77%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	88%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	99%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes slideColor{
	0%{
		background-color: #387780;
	}
	33%{
		background-color: #3f88c5;
	}
	66%{
		background-color: #588b8b;
	}
	100%{
		background-color: #387780;
	}
}

42

Rolling text animation

By: pixeldev

html {
  box-sizing: border-box !important;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #333;
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.charging-container {
  max-width: 150px;
  width: 100%;
  height: 60px;
  border: 4px solid rgb(236, 39, 72);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.charging-container::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 16px;
  background: rgb(236, 39, 72);
  right: -9px;
  top: 50%;
  margin-top: -8px;
  border-radius: 2px;
}

.charging-container::after {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  /* right: 10px; */
  background: rgb(236, 39, 72);
  transition: all .3s;
  -webkit-animation: charging 2s steps(5) infinite;
  -moz-animation: charging 2s steps(5) infinite;
  animation: charging 2s steps(5) infinite;
  animation: charging 2s steps(5) infinite;
}

.charging-container:hover::after {
  animation-play-state: paused;
}
@-webkit-keyframes charging {
  from {
    width: 20%;
  } 
  to {
    width: 100%;
  }
}

@-moz-keyframes charging {
  from {
    width: 20%;
  } 
  to {
    width: 100%;
  }
}
@keyframes charging {
  from {
    width: 20%;
  } 
  to {
    width: 100%;
  }
}

All

CSS Grid Layout

By: pixeldev

Button hover with card

By: pixeldev

Wavy text animation

By: pixeldev

Pendulum Wave

By: pixeldev

Pure CSS using Flexbox CSS Gallery

By: pixeldev

Happy birthday banner

By: pixeldev

Button – Shadow Pulse Animation

By: pixeldev

Flat Preloader

By: pixeldev

Circle(dots) css animation loader

By: pixeldev

Rolling text animation

By: pixeldev

Battery Charging

By: pixeldev

CSS Grid Layout

By: pixeldev