CSS Code Only

39

36

Pure CSS using Flexbox CSS Gallery

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;
	}
}

36

Rolling text animation

By: pixeldev

36

CSS Grid Layout

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); }
    }

36

Happy birthday banner

By: pixeldev

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.item {
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 6px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header {
  background-color: #1EAAFC;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

.sidebar {
  background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)
}

.content-1,
.content-2,
.content-3 {
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}

.footer {
  background-color: #6C52D9;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

35

CSS Grid Layout – with color

By: pixeldev

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;
    }
}

35

Falling leaves

By: pixeldev

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);
    
  }
  
  
}

35

Fire Animation

By: pixeldev

.wrapper {
	margin: 50px;
	width: 300px;
	height: 300px;
	overflow: hidden;
	position:relative
}

.right {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-top-color: transparent;
	border-left-color: transparent;
	position: absolute;
	transform: rotate(-45deg);
	animation: rota2 1000ms linear;
  -moz-animation: rota2 1000ms linear;
  -o-animation: rota2 1000ms linear;
  -webkit-animation: rota2 1000ms linear;
}

@keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-o-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-moz-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}
@-webkit-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

.left {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-bottom-color: transparent;
	border-right-color: transparent;
	position: absolute;
	transform: rotate(315deg);
	animation: rota 2000ms linear;
  -o-animation: rota 2000ms linear;
  -moz-animation: rota 2000ms linear;
  -webkit-animation: rota 2000ms linear;
}
@keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-o-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@moz-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-webkit-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}

.middle {
  color: #0987bc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	width: 130px;
	height: 130px;
	left: 15px;
	top: 15px;
	border-radius: 150px;
	position: relative;
	z-index: 4;
}

.popover {
	background: white;
	width: 80px;
	height: 162px;
	position:absolute;
	top: -3px;
	left: -3px;
	opacity:0;
	z-index:2;
	animation: popover 1000ms linear;
  -moz-animation: popover 1000ms linear;
  -o-animation: popover 1000ms linear;
  -webkit-animation: popover 1000ms linear;
}

@keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-moz-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

34

All

Button hover with card

By: pixeldev

Wavy text animation

By: pixeldev

Fluid Animation

By: pixeldev

Hamburger Menu

By: pixeldev

Pure CSS using Flexbox CSS Gallery

By: pixeldev

Rolling text animation

By: pixeldev

CSS Grid Layout

By: pixeldev

Happy birthday banner

By: pixeldev

CSS Grid Layout – with color

By: pixeldev

Falling leaves

By: pixeldev

Fire Animation

By: pixeldev

Circle Animation Loader

By: pixeldev