Snippets

Get In Touch Contact Information Icon Designs CSS

 Techmates
 21 Apr, 2018

In this demo we're going to create a creative get in touch contact information icon designs and their hover effects.


Let's dive into the code:


- HTML Structure

 <div class="card">
	<div class="social-icon marker-style">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon marker-style pin">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon marker-style icon-bg">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon perspactive-style">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style round">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style between">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon hexagon-style square-sm">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style square-lg">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style pentagon">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>


- CSS Styles

 :root {
    --clr-blue: #4285F4;
    --clr-red: #EA4335;
}
.section {
    padding: 50px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin: -1px 0;
}
.card {
    display: inline-block;
    width: 300px;
    cursor: pointer;
}

Hope you guys liked the demo!

Read more
creative,   animation,   hover ... 

Shape Transformation On Hover CSS

 Techmates
 20 Apr, 2018

In this post we'd love to share a CSS Shapes and their transformation on mouse over/hover using pure CSS. 


This demo provides various kind of shape transformations like: - Circle -> Square, Square -> Triangle, Square -> Pentagon, Star -> Square, Arrow -> Square and many more.

Some of the old browsers will not support the demo because the demo uses the clip-path advance css property.

The code structure

-HTML Structure

 <div class="shape-row">
	<div class="col-4">
		<div class="shape circle to-zoom"></div>
	</div>
	<div class="col-4">
		<div class="shape circle to-ellipse"></div>
	</div>
	<div class="col-4">
		<div class="shape circle to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-triangle"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-trapezoid"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-parallelogram"></div>         
	</div>
	<div class="col-4">
		<div class="shape square to-rhombus"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-pentagon"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-hexagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-heptagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-octagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-bevel"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-rabbet"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-normal to-right"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-point to-right"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-chevron to-right"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape star to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape close to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape frame to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-send"></div>
	</div>
</div>


- CSS Styles

 .container {
    width: 80%;
    margin: 0 auto;
}
.shape-row {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 30px 0;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
}

.shape-row::after {
    display: table;
    content: " ";
    clear: both;
}
.col-4 {
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}
.shape {
    width: 175px;
    height: 175px;
    background: #4285F4;
    margin: 0 auto;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.shape.circle {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
.shape.circle.to-zoom {
    -webkit-clip-path: circle(40.0% at 50% 50%);
    clip-path: circle(40.0% at 50% 50%);
}
.shape.circle.to-zoom:hover {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
/* Circle to ellipse */
.shape.circle.to-ellipse {
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
}
.shape.circle.to-ellipse:hover {
    -webkit-clip-path: ellipse(30% 50% at 50% 50%);
    clip-path: ellipse(30% 50% at 50% 50%);
}
/* Circle to square */
.shape.circle.to-square:hover {
    -webkit-clip-path: circle(70% at 50% 50%);
    clip-path: circle(70% at 50% 50%);
}
/* Square */
.shape.square {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
/* Square to triangle */
.shape.square.to-triangle:hover {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
}
/* Square to trapezoid */
.shape.square.to-trapezoid:hover {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
/* Square to parallelogram */
.shape.square.to-parallelogram:hover {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
/* Square to rhombus */
.shape.square.to-rhombus:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Square to pentagon */
.shape.square.to-pentagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);
}
.shape.square.to-pentagon:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* Square to hexagon */
.shape.square.to-hexagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 1% 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 1% 0);
}
.shape.square.to-hexagon:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* Square to heptagon */
.shape.square.to-heptagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
}
.shape.square.to-heptagon:hover {
    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/* Square to octagon */
.shape.square.to-octagon {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0 0);
    clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0 0);
}
.shape.square.to-octagon:hover {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/* Square to bevel */
.shape.square.to-bevel {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}
.shape.square.to-bevel:hover {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
/* Square to rabbet */
.shape.square.to-rabbet {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);
clip-path: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);
}
.shape.square.to-rabbet:hover {
    -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
/* Arrow */
.shape.arrow-normal {
    -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
.shape.arrow-normal.to-right:hover {
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
/* Arrow point */
.shape.arrow-point {
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}
.shape.arrow-point.to-right:hover {
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
/* Arrow chevron */
.shape.arrow-chevron {
    -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.shape.arrow-chevron.to-right:hover {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* Star to square */
.shape.star {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.shape.star.to-square:hover {
    -webkit-clip-path: polygon(50% 0%, 74% 0, 100% 0, 100% 59%, 100% 100%, 51% 100%, 0 100%, 0 60%, 0 0, 26% 0);
    clip-path: polygon(50% 0%, 74% 0, 100% 0, 100% 59%, 100% 100%, 51% 100%, 0 100%, 0 60%, 0 0, 26% 0);
}
/* Close to square */
.shape.close {
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.shape.close.to-square:hover {
    -webkit-clip-path: polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 100% 100%, 100% 80%, 100% 50%, 100% 0, 80% 0%, 50% 0);
    clip-path: polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 100% 100%, 100% 80%, 100% 50%, 100% 0, 80% 0%, 50% 0);
}
/* Frame to square */
.shape.frame {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}
.shape.frame.to-square:hover {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);    
}
/* Square to send btn */
.shape.square.to-send {
    -webkit-clip-path: polygon(100% 30%, 0 30%, 0 70%, 100% 70%);
    clip-path: polygon(100% 30%, 0 30%, 0 70%, 100% 70%);
}
.shape.square.to-send:hover {
    -webkit-clip-path: polygon(100% 0, 0 45%, 50% 50%, 65% 100%);
    clip-path: polygon(100% 0, 0 45%, 50% 50%, 65% 100%);
}

Hope you guys liked the demo. Enjoy!

Read more
css,   creative,   animation ... 

Radio Button And Checkbox Designs CSS

 Techmates
 18 Apr, 2018

In this post, we're creating a radio button and checkbox elements designs using CSS.


The web browsers are not support all the properties/designs for this kind elements. So, in this demo we manipulating the elements(radio-button, checkbox) and replace the core elements with HTML tag(label) and CSS design.

The demo has 2 types of color themes. You can change the theme by replacing the variable file in index.html

The code snippets:


- HTML Structure

 <div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_1" />
    <label for="radio_border_zoomOut_1">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_2" />
    <label for="radio_border_zoomOut_2">Radio button</label>
</div>	
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_3" />
    <label for="radio_border_zoomOut_3">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_1" />
    <label for="checkbox_border_zoomOut_1">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_2" />
    <label for="checkbox_border_zoomOut_2">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_3" />
    <label for="checkbox_border_zoomOut_3">checkbox</label>
</div>

<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_1" />
    <label for="radio_border_zoomIn_1">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_2" />
    <label for="radio_border_zoomIn_2">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_3" />
    <label for="radio_border_zoomIn_3">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_1" />
    <label for="checkbox_border_zoomIn_1">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_2" />
    <label for="checkbox_border_zoomIn_2">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_3" />
    <label for="checkbox_border_zoomIn_3">checkbox</label>
</div>

<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_1" />
    <label for="radio_solid_1">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_2" />
    <label for="radio_solid_2">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_3" />
    <label for="radio_solid_3">Radio button</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_1" />
    <label for="checkbox_solid_1">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_2" />
    <label for="checkbox_solid_2">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_3" />
    <label for="checkbox_solid_3">Checkbox</label>
</div>

<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__1" />
    <label for="radio_solid_border__1">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__2" />
    <label for="radio_solid_border__2">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__3" />
    <label for="radio_solid_border__3">Radio button</label>
</div>

<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_1" />
    <label for="checkbox_solid_border_1">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_2" />
    <label for="checkbox_solid_border_2">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_3" />
    <label for="checkbox_solid_border_3">Checkbox</label>
</div>

<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__1" />
    <label for="radio_solid_border_bg__1">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__2" />
    <label for="radio_solid_border_bg__2">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__3" />
    <label for="radio_solid_border_bg__3">Radio button</label>
</div>

<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_1" />
    <label for="checkbox_solid_border_bg_1">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_2" />
    <label for="checkbox_solid_border_bg_2">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_3" />
    <label for="checkbox_solid_border_bg_3">Checkbox</label>
</div>

<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-linux"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_1" />
    <label for="radio_card_1">Option 1</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-apple"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_2" />
    <label for="radio_card_2">Option 2</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-windows"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_3" />
    <label for="radio_card_3">Option 3</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-bike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_1" />
    <label for="checkbox_card_1">Checkbox 1</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-motorbike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_2" />
    <label for="checkbox_card_2">Checkbox 2</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-car"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_3" />
    <label for="checkbox_card_3">Checkbox 3</label>
</div>

- CSS Styles


- style.css

 .grid {
    border-top: 1px solid var(--grid-border-clr);
    border-bottom: 1px solid var(--grid-border-clr);
    margin-bottom: -1px;
}
.col-2 {
    width: 50%;
    float: left;
    padding: 25px 0;
}
.box-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}
.box-group input[type="radio"], .box-group input[type="checkbox"] {
    display: none;
}
.box-group label {
    position: relative;
    cursor: pointer;
    font-weight: 700;
    color: var(--clr-gray);
}
.box-group.basic label {
    font-size: 16px;
    padding-left: 25px;
    transform: var(--transition);
}
.box-group.basic label::before, .box-group.basic label::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transition: var(--transition);
}
.box-group.basic label::after {
    border: 1px solid var(--clr-gray);
}
.box-group.basic label::before {
    left: 1px;
    font-family: "Material Design Icons";
    opacity: 0;
}
.box-group.basic input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.basic input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.basic.zoomOut label::before {
    transform: scale(0);
}
.box-group.basic.zoomIn label::before {
    transform: scale(2);
}
.box-group.basic input[type="radio"] + label::after {
    border-radius: 50%;
}
.box-group.basic:hover label {
    color: var(--clr-gray);
}
.box-group.basic:hover label::after {
    box-shadow: 0 0 5px rgba(0, 0, 0, .15) inset;
}
.box-group.basic input[type="radio"]:checked + label, .box-group.basic input[type="checkbox"]:checked + label {
    color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::after, .box-group.basic input[type="checkbox"]:checked + label::after {
    border-color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::before, .box-group.basic input[type="checkbox"]:checked + label::before {
    opacity: 1;
    transform: scale(1);
    color: var(--clr-green);
}
.box-group.solid label {
    padding: 10px 25px;
    border-radius: 2px;
    transition: var(--transition);
}
.box-group.solid.border label {
    border: 1px solid rgba(0, 0, 0, .25);
}
.box-group.solid.border-bg label {
    background: rgba(0, 0, 0, .1);
}
.box-group.solid:hover label {
    background: rgba(0, 0, 0, .05);
}
.box-group.solid input[type="checkbox"]:checked + label, .box-group.solid input[type="radio"]:checked + label {
    color: #ffffff;
    background: var(--clr-green);
    border-color: var(--clr-green);
}
.box-group.solid label::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    font-family: "Material Design Icons";
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transform: scale(0) translateX(-20px);
    opacity: 0;
    transition: var(--transition);
}
.box-group.solid input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.solid input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.solid input[type="checkbox"]:checked + label::before, .box-group.solid input[type="radio"]:checked + label::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}
.box-group.card {
    position: relative;
    padding: 15px 25px;
    min-width: 120px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s;
    z-index: 9;
}
.box-group.card.checked {
    background: rgba(0, 0, 0, .15);
}
.box-group.card::after {
    position: absolute;
    font-family: "Material Design Icons";
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: var(--clr-green);
    transform: scale(0);
    opacity: 0;
    transition: all .5s;
}
.box-group.card.radio::after {
    content: "\F01A";
}
.box-group.card.checkbox::after {
    content: "\F790";
}
.box-group.card.checked::after {
    transform: scale(1);
    opacity: 1;
}
.box-group.card label {
    font-weight: 700;
    font-size: 16px;
    z-index: -1;
}
.box-group.card i {
    font-size: 55px;
    color: var(--clr-gray);
    display: inline-block;
    margin-bottom: 10px;
    transition: all .5s;
}
.box-group.card:hover {
    background: rgba(0, 0, 0, .1);
}
.box-group.card:hover i {
    color: var(--clr-black);
    transform: translateY(5px);
}
.box-group.card.checked i {
    color: var(--clr-black);
    transform: translateY(5px);
}

- black-theme.css

 :root {
    --transition: .25s;
    --clr-blue: #4285F4;
    --clr-gray: #ccc;
    --clr-black: #fff;
    --clr-green: #4baf4b;
    --grid-border-clr: rgba(255, 255, 255, .1);
}
.dd-center-p-content {
    background: #1C1C1C;
}
.dd-title {
    color: #fff;
}

- white-theme.css

 :root {
    --clr-blue: #4285F4;
    --clr-gray: #6c6c6c;
    --clr-black: #3c3c3c;
    --clr-green: #4baf4b;
    --grid-border-clr: #cccccc;
    --transition: .25s;
}

- Javascripts


 $('[data-check-element]').on('click', function() {
	if( $(this).attr('data-check-element') == 'radio' ) {
		$('.box-group.card.radio').removeClass('checked');
		$(this).addClass('checked');
	} else {
		$(this).toggleClass('checked');
	}
});

Hope you guys liked the demo!


Read more
css,   creative,   focus ... 

Social Media Icon Designs

 Techmates
 22 Mar, 2018

A set of Social media icon design and hover effects for the the footer.


HTML Structure

 <ul class="social-icon-list after-effect shutter-left">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-right">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-top">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-bottom">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-left-right">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-right-left">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-top-bottom">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-bottom-top">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<div class="box bg-black cf">
<ul class="social-icon-list after-effect zoom out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom rotate-out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom rotate-in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<div class="box bg-gray cf">
<ul class="social-icon-list after-effect zoom out-in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom in-out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list with-colors">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>

CSS Styles


 :root {
	--primary-color: #368ae9;
	--brand-fb: #3b5998;
	--brand-tw: #1da1f2;
	--brand-yt: #ff0000;
	--brand-li: #0077b5;
	--brand-gp: #dd4b39;
	--brand-sk: #00aff0;
	--brand-gh: #333;
}
.social-icon-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-icon-list li {
	display: inline;
}
.social-icon-list li a {
	position: relative;
	display: inline-block;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	-webkit-transition: all .75s ease-out;
	   -moz-transition: all .75s ease-out;
		-ms-transition: all .75s ease-out;
		 -o-transition: all .75s ease-out;
			transition: all .75s ease-out;
}
.social-icon-list.with-colors li.fb a:hover {
	background: var(--brand-fb);
}
.social-icon-list.with-colors li.tw a:hover {
	background: var(--brand-tw);
}
.social-icon-list.with-colors li.yt a:hover {
	background: var(--brand-yt);
}
.social-icon-list.with-colors li.li a:hover {
	background: var(--brand-li);
}
.social-icon-list.with-colors li.gp a:hover {
	background: var(--brand-gp);
}
.social-icon-list.with-colors li.sk a:hover {
	background: var(--brand-sk);
}
.social-icon-list.with-colors li.gh a:hover {
	background: var(--brand-gh);
}
.social-icon-list.after-effect li a {
	z-index: 1;
}
.social-icon-list.after-effect li a:after {
	position: absolute;
	content: " ";
	z-index: -1;
	-webkit-transition: all .25s ease-out;
	   -moz-transition: all .25s ease-out;
		-ms-transition: all .25s ease-out;
		 -o-transition: all .25s ease-out;
			transition: all .25s ease-out;
}
.social-icon-list.after-effect li.fb a:after {
	background: var(--brand-fb);
}
.social-icon-list.after-effect li.tw a:after {
	background: var(--brand-tw);
}
.social-icon-list.after-effect li.yt a:after {
	background: var(--brand-yt);
}
.social-icon-list.after-effect li.li a:after {
	background: var(--brand-li);
}
.social-icon-list.after-effect li.gp a:after {
	background: var(--brand-gp);
}
.social-icon-list.after-effect li.sk a:after {
	background: var(--brand-sk);
}
.social-icon-list.after-effect li.gh a:after {
	background: var(--brand-gh);
}
.social-icon-list.shutter-left li a:after {
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-left li a:hover:after {
	width: 100%;
}
.social-icon-list.shutter-right li a:after {
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-right li a:hover:after {
	width: 100%;
}
.social-icon-list.shutter-top li a:after {
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-top li a:hover:after {
	height: 100%;
}
.social-icon-list.shutter-bottom li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-bottom li a:hover:after {
	height: 100%;
}
.social-icon-list.shutter-left-right li a:after {
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-left-right li a:hover:after {
	left: 0;
	right: auto;
	width: 100%;
}
.social-icon-list.shutter-right-left li a:after {
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-right-left li a:hover:after {
	right: 0;
	left: auto;
	width: 100%;
}
.social-icon-list.shutter-top-bottom li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-top-bottom li a:hover:after {
	height: 100%;
	top: 0;
	bottom: auto;
}
.social-icon-list.shutter-bottom-top li a:after {
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-bottom-top li a:hover:after {
	height: 100%;
	top: auto;
	bottom: 0;
}
.social-icon-list.zoom li a:after {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	margin: 0 auto;
	opacity: 0;
}
.social-icon-list.zoom.out li a:after {
	width: 75%;
	height: 75%;
}
.social-icon-list.zoom.in li a:after {
	width: 125%;
	height: 125%;
}
.social-icon-list.zoom li a:hover:after {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.social-icon-list.zoom.rotate-out li a:after {
	top: 0;
	left: 0;
	-webkit-transform: scale(.5) rotate(0deg);
	   -moz-transform: scale(.5) rotate(0deg);
		-ms-transform: scale(.5) rotate(0deg);
		 -o-transform: scale(.5) rotate(0deg);
			transform: scale(.5) rotate(0deg);
}
.social-icon-list.zoom.rotate-out li a:hover:after {
	-webkit-transform: scale(1) rotate(90deg);
	   -moz-transform: scale(1) rotate(90deg);
		-ms-transform: scale(1) rotate(90deg);
		 -o-transform: scale(1) rotate(90deg);
			transform: scale(1) rotate(90deg);
}
.social-icon-list.zoom.rotate-in li a:after {
	top: 0;
	left: 0;
	-webkit-transform: scale(1.5) rotate(0deg);
	   -moz-transform: scale(1.5) rotate(0deg);
		-ms-transform: scale(1.5) rotate(0deg);
		 -o-transform: scale(1.5) rotate(0deg);
			transform: scale(1.5) rotate(0deg);	
}
.social-icon-list.zoom.rotate-in li a:hover:after {
	-webkit-transform: scale(1) rotate(90deg);
	   -moz-transform: scale(1) rotate(90deg);
		-ms-transform: scale(1) rotate(90deg);
		 -o-transform: scale(1) rotate(90deg);
			transform: scale(1) rotate(90deg);
}
.social-icon-list.zoom.out-in li a:after {
	top: 0;
	left: 0;
}
.social-icon-list.zoom.out-in li a:hover:after {
	-webkit-animation: zoomOutIn 1s ease;
	   -moz-animation: zoomOutIn 1s ease;
		-ms-animation: zoomOutIn 1s ease;
		 -o-animation: zoomOutIn 1s ease;
			animation: zoomOutIn 1s ease;
	animation-fill-mode: forwards;
}
@-webkit-keyframes zoomOutIn {
	0% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	40% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomOutIn {
	0% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	40% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
.social-icon-list.zoom.in-out li a:after {
	top: 0;
	left: 0;
}
.social-icon-list.zoom.in-out li a:hover:after {
	-webkit-animation: zoomInOut 1s ease;
	   -moz-animation: zoomInOut 1s ease;
		-ms-animation: zoomInOut 1s ease;
		 -o-animation: zoomInOut 1s ease;
			animation: zoomInOut 1s ease;
	animation-fill-mode: forwards;
}
@-webkit-keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	40% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	40% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}

Hope you guys liked the demo!


Read more
css,   animation,   hover ... 

Loading Spinners in CSS

 Techmates
 13 Mar, 2018

In this post we're creating the animated loading spinners with pure CSS.

In this demo we're sharing the dot spinner, moon spinners, rotators, half circle & square spinners.

HTML Structure

 <div class="spinner dot"></div>
<div class="spinner line"><span></span></div>
<div class="spinner line two"><span></span></div>
<div class="spinner line three"><span></span></div>
<div class="spinner moon"></div>
<div class="spinner moon two"></div>
<div class="spinner moon three"></div>
<div class="spinner filled half"></div>
<div class="spinner filled fourth">
	<div></div>
	<div></div>
</div>
<div class="loader solid square rotate"></div>
<div class="loader solid circle rotate"></div>
<div class="loader solid square fade"></div>
<div class="loader solid circle fade"></div>
<div class="loader circle-full blink-half"></div>
<div class="loader circle-full blink"></div>
<div class="loader circle-full zoomIO-half"></div>
<div class="loader circle-full zoomIO"></div>

CSS Styles


.box {
	border-bottom: 1px solid #ccc;
}
.card {
	position: relative;
	width: 175px;
	height: 200px;
	display: inline-block;
} 

.card > div {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.col {
	min-width: 20%;
	float: left;
}
.spinner {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 40px;
}
/* Dot spinner */
.spinner.dot {
	border: 1px solid #e5e5e5;
	border-radius: 50px;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.dot:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background: #4c4c4c;
	z-index: 9;
}
/* Moon style */
.spinner.moon:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border-right: 2px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 9;
}
.spinner.moon.two:after {
	border-left: 2px solid #4c4c4c;
}
.spinner.moon.three:after {
	border-top: 2px solid #4c4c4c;
	border-bottom: 2px solid #4c4c4c;
}
/* Line spinner */
.spinner.line span {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top: 3px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.line.two span {
	border-bottom: 3px solid #4c4c4c;
}
.spinner.line.three span {
	border-left: 3px solid #4c4c4c;
	border-right: 3px solid #4c4c4c;
}
.spinner.filled.half:before,
.spinner.filled.half:after {
	position: absolute;
	content: " ";
	height: 25px;
	width: 50px;
	background: #EA4335;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.half:before {
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	transform-origin: bottom;
}
.spinner.filled.half:after {
	top: 50%;
	background: #FACD47;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	transform-origin: top;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
}
.spinner.filled.fourth div {
	display: inline-block;
	float: left;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.fourth div:first-child:before {
	top: 0;
	left: 0;
	border-top-left-radius: 50px;
	background: #FACD47;
	transform-origin: bottom right;
}
.spinner.filled.fourth div:first-child:after {
	top: 0;
	right: 0;
	border-top-right-radius: 50px;
	background: #EA4335;
	transform-origin: bottom left;
}
.spinner.filled.fourth div:nth-child(2):before {
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 50px;
	background: #34A853;
	transform-origin: top right;
}
.spinner.filled.fourth div:nth-child(2):after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 50px;
	background: #4285F4;
	transform-origin: top left;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.solid {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
}
/* Fade */
.loader.solid.fade {
	-webkit-animation: loader 1.5s infinite linear;
	animation: loader 1.5s infinite linear;
}
@-webkit-keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
@keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
.loader.solid.square {
	border-radius: 2px;
}
.loader.solid.circle {
	border-radius: 50%;
}
.loader.rotate {
	-webkit-animation: rotate 1s linear  infinite;
	-moz-animation: rotate 1s linear  infinite;
	-ms-animation: rotate 1s linear  infinite;
	-o-animation: rotate 1s linear  infinite;
	animation: rotate 1s linear  infinite;
}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.circle-full {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
	border-radius: 100%;
}
/* Circle(dot) Animation */
.loader.circle-full.blink {
	-webkit-animation: loderBlinkAnimation 1s linear infinite;
	-moz-animation: loderBlinkAnimation 1s linear infinite;
	-ms-animation: loderBlinkAnimation 1s linear infinite;
	-o-animation: loderBlinkAnimation 1s linear infinite;
	animation: loderBlinkAnimation 1s linear infinite;
}
@-webkit-keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
@keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
.loader.circle-full.zoomIO {
	-webkit-animation: loderZoomIOAnimation 1s linear infinite;
	-moz-animation: loderZoomIOAnimation 1s linear infinite;
	-ms-animation: loderZoomIOAnimation 1s linear infinite;
	-o-animation: loderZoomIOAnimation 1s linear infinite;
	animation: loderZoomIOAnimation 1s linear infinite;
}
@-webkit-keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
@keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
.loader.circle-full.blink-half {
	-webkit-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-moz-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-ms-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-o-animation: loaderBlinkHalfAnimation 1s linear infinite;
	animation: loaderBlinkHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
@keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
.loader.circle-full.zoomIO-half {
	-webkit-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-moz-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-ms-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-o-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	animation: loaderZoomIOHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}
@keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}


Hope you guys liked the demo.

Read more
html,   css,   creative ... 

Bubble Loaders in CSS

 Techmates
 12 Mar, 2018

In this demo we'd love to share bubble loaders animation/effects with pure CSS with you guys.

In this article we provide the bubble blink effect, zoom in, zoom out, bubble collide animation, bubble bars effects. 

In this article we're using custom css animation/transition. You can change the animation according to your need.

*Note:  Advance animation will only work in latest supported browsers.

HTML Structure

 <div class="loader-box">
	<div class="bubble"></div>
	<div class="bubble animate"></div>
	<div class="bubble animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-in"></div>
	<div class="bubble zoom-out"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-out-xl"></div>
</div>
<div class="loader-box">
	<div class="bubble relative animate"></div>
	<div class="bubble relative animate delay-1"></div>
	<div class="bubble relative animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble relative zoom"></div>
	<div class="bubble relative zoom delay-1"></div>
	<div class="bubble relative zoom delay-2"></div>
	<div class="bubble relative zoom delay-3"></div>
</div>
<div class="cf"></div><br />
<div class="loader-box">
	<div class="bubble relative solid collide"></div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-top-bottom">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-left-right">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-zoom">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

CSS Styles

 /* Loader box: parent class; */
.loader-box {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 200px;
	height: 200px;
}
/* Bubble */
.bubble {
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	right: 0;
	margin: 0 auto;
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
}
.bubble.relative {
	position: relative;
	left: 50%;
	float: left;
	margin-left: 20px
}
/* Bubble animation */
.bubble.animate {
	-webkit-animation: bubbleEffect 2s ease-out infinite;
	   -moz-animation: bubbleEffect 2s ease-out infinite;
		-ms-animation: bubbleEffect 2s ease-out infinite;
		 -o-animation: bubbleEffect 2s ease-out infinite;
			animation: bubbleEffect 2s ease-out infinite;
}
.bubble.animate.reverse {
	-webkit-animation: bubbleEffectReverse 2s ease-out infinite;
	   -moz-animation: bubbleEffectReverse 2s ease-out infinite;
		-ms-animation: bubbleEffectReverse 2s ease-out infinite;
		 -o-animation: bubbleEffectReverse 2s ease-out infinite;
			animation: bubbleEffectReverse 2s ease-out infinite;
	opacity: 1;
}
.bubble.animate.delay-1 {
	-webkit-animation: bubbleEffect 2s ease-out .5s infinite;
	   -moz-animation: bubbleEffect 2s ease-out .5s infinite;
		-ms-animation: bubbleEffect 2s ease-out .5s infinite;
		 -o-animation: bubbleEffect 2s ease-out .5s infinite;
			animation: bubbleEffect 2s ease-out .5s infinite;
}
.bubble.animate.delay-2 {
	-webkit-animation: bubbleEffect 2s ease-out 1s infinite;
	   -moz-animation: bubbleEffect 2s ease-out 1s infinite;
		-ms-animation: bubbleEffect 2s ease-out 1s infinite;
		 -o-animation: bubbleEffect 2s ease-out 1s infinite;
			animation: bubbleEffect 2s ease-out 1s infinite;
}
@-webkit-keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
@keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
/* Bubble zoom effect */
.bubble.zoom {
	width: 10px;
	height: 10px;
	-webkit-animation: zoomEffect 2s ease-out infinite;
	   -moz-animation: zoomEffect 2s ease-out infinite;
		-ms-animation: zoomEffect 2s ease-out infinite;
		 -o-animation: zoomEffect 2s ease-out infinite;
			animation: zoomEffect 2s ease-out infinite;
}
.bubble.zoom.delay-1 {
	-webkit-animation-delay: .25s;
	-o-animation-delay: .25s;
	animation-delay: .25s;
}
.bubble.zoom.delay-2 {
	-webkit-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}
.bubble.zoom.delay-3 {
	-webkit-animation-delay: .75s;
	-o-animation-delay: .75s;
	animation-delay: .75s;
}
@-webkit-keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
@keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
.bubble.zoom-in {
	-webkit-animation: zoomInEffect 3s ease-out infinite;
	   -moz-animation: zoomInEffect 3s ease-out infinite;
		-ms-animation: zoomInEffect 3s ease-out infinite;
		 -o-animation: zoomInEffect 3s ease-out infinite;
			animation: zoomInEffect 3s ease-out infinite;
	opacity: 1;
}
@-webkit-keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
.bubble.zoom-out {
	-webkit-animation: zoomOutEffect 3s ease-in infinite;
	   -moz-animation: zoomOutEffect 3s ease-in infinite;
		-ms-animation: zoomOutEffect 3s ease-in infinite;
		 -o-animation: zoomOutEffect 3s ease-in infinite;
			animation: zoomOutEffect 3s ease-in infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
@keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
.bubble.zoom-out-xl {
	-webkit-animation: zoomOutXLEffect 1s ease infinite;
	   -moz-animation: zoomOutXLEffect 1s ease infinite;
		-ms-animation: zoomOutXLEffect 1s ease infinite;
		 -o-animation: zoomOutXLEffect 1s ease infinite;
			animation: zoomOutXLEffect 1s ease infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
@keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
/* Bubble collide efffect */
.bubble.solid.collide {
	position: relative;
	width: 25px;
	height: 25px;
	opacity: 1;
	background: #6c6c6c;
	-webkit-animation: bubbleCollideEffect 1s .25s infinite;
	   -moz-animation: bubbleCollideEffect 1s .25s infinite;
		-ms-animation: bubbleCollideEffect 1s .25s infinite;
		 -o-animation: bubbleCollideEffect 1s .25s infinite;
			animation: bubbleCollideEffect 1s .25s infinite;
}
.bubble.solid.collide:before,
.bubble.solid.collide:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
	border-radius: 100%;
	z-index: 9;
	top: 0;
	background: #6c6c6c;
}
.bubble.solid.collide:before {
	left: -25px;
	-webkit-animation: bubbleCollideLeft 1s ease-out infinite;
	   -moz-animation: bubbleCollideLeft 1s ease-out infinite;
		-ms-animation: bubbleCollideLeft 1s ease-out infinite;
		 -o-animation: bubbleCollideLeft 1s ease-out infinite;
			animation: bubbleCollideLeft 1s ease-out infinite;
}
@-webkit-keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
@keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
.bubble.solid.collide:after {
	right: -25px;
	-webkit-animation: bubbleCollideRight 1s .5s ease-out infinite;
	   -moz-animation: bubbleCollideRight 1s .5s ease-out infinite;
		-ms-animation: bubbleCollideRight 1s .5s ease-out infinite;
		 -o-animation: bubbleCollideRight 1s .5s ease-out infinite;
			animation: bubbleCollideRight 1s .5s ease-out infinite;
}
@-webkit-keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;		
	}
}
@keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;		
	}
}
.bubble.solid.bgt {
	opacity: 1;
	background: transparent;
	width: 25px;
	height: 25px;
}
/* Bubble in out from top to bottom */
.bubble.solid.in-out-top-bottom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-top-bottom span:first-child {
	left: -30px;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease infinite;
			animation: bubbleInOutTBEffect 1.5s ease infinite;
}
.bubble.solid.in-out-top-bottom span:nth-child(2) {
	left: 0;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
			animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
}
.bubble.solid.in-out-top-bottom span:last-child {
	right: -30px;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
			animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
}
@-webkit-keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
@keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
/* Bubble in out from left to right */
.bubble.solid.in-out-left-right,
.bubble.solid.in-out-zoom {
	margin-left: 70px;
}
.bubble.solid.in-out-left-right span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-left-right span {
	opacity: 0;
}
.bubble.solid.in-out-left-right span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out infinite;
			animation: bubbleInOutLREffect 2.5s ease-out infinite;
}
.bubble.solid.in-out-left-right span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
}
@-webkit-keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
@keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
/* Bubble in out with scale */
.bubble.solid.in-out-zoom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
	opacity: 0;
}
.bubble.solid.in-out-zoom span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
}
@-webkit-keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}
@keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}

Hope you guys liked the demo.

Read more
css,   creative,   animation ... 

Input Text Box Effects in CSS

 Techmates
 16 Feb, 2018

Hello folks, are you guys ready to explore the various kinds of styles/effects on  input text box? Then this demo will show you the basic shadow(inset/outset) effect on input, Spread shadow effect, Glow effect using shadow, Border animations, Shutter(in/out) effects, and border bottom animations.

You can modify the code according to you need.  There are no external libraries/js. The demo is implemented on pure CSS.

HTML Structure

  <input type="tyext" class="form-input basic" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in smooth-corner" placeholder="DD - Design Drastic">

<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation left"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation right"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation center"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation both-side"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-1" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-2" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-3" placeholder="DD - Design Drastic">
	<span class="border-line-animation top"></span>
	<span class="border-line-animation left"></span>
	<span class="border-line-animation bottom"></span>
	<span class="border-line-animation right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-4" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

CSS Styles

* {
	box-sizing: border-box;
}
.form-group {
	position: relative;
}
.form-input {
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 10px;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
} 
.form-input.smooth-corner {
	border-radius: 5px;
}
.form-input.round {
	border-radius: 50px;
}
.form-input.basic {
	border: 2px solid rgba(0, 0, 0, .15);
}
.form-input.basic:hover {
	border-color: rgba(0, 0, 0, .35);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.form-input.basic:focus {
	border-color: #4285F4;
	box-shadow: 0 0 10px rgba(66, 133, 244, .5);
}
.form-input.basic.shadow-inset:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
}
.form-input.basic.shadow-inset:focus {
	box-shadow: 0 0 10px rgba(66, 133, 244, .5) inset;
}
/* Spread shadow */
.form-input.spread-shadow {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.spread-shadow:focus {
	background: #fff;
	box-shadow: 0 0 40px 5px rgba(0, 0, 0, .2);
}
/* Glow shadow */
.form-input.glow-shadow {
	border: 0;
	background: rgba(0, 0, 0, .1);
}
.form-input.glow-shadow:focus {
	box-shadow: 0 0 0 2px #4285F4;
	background: #fff;
	border-color: #4285F4;
}
/* Chagne Border */
.form-input.border-dashed {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.border-dashed:focus {
	border: 2px dashed #999;
	background: #fff;
	border-color: #4285F4;
}
/* Shutter */
.form-input.shutter {
	border: 2px solid rgba(0, 0, 0, .15);
	box-shadow: 0 20px 0 0 #d5d5d5 inset, 0 -20px 0 0 #d5d5d5 inset;
}
.form-input.shutter:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, .3);
}

.form-input.shutter-in {
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	background: transparent;
}
.form-input.shutter-in:focus {
	border-color: rgba(0, 0, 0, .3);
	box-shadow: 0 -50px 0 #d5d5d5 inset;
}

/* Border bottom effects */
.form-input.border-bottom {
	position: relative;
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-bottom ~ .border-bottom-animation {
	position: absolute;
	content: "";
	width: 0;
	background: rgba(0, 0, 0, .2);
	height: 2px;
	z-index: 99;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
/* Border bottom left */
.form-input.border-bottom ~ .border-bottom-animation.left {
	left: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.left {
	background: #4285F4;
	width: 100%;
}
/* Border bottom right */
.form-input.border-bottom ~ .border-bottom-animation.right {
	right: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.right {
	background: #4285F4;
	width: 100%;
}
/* Border bottom center */
.form-input.border-bottom ~ .border-bottom-animation.center {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.center {
	background: #4285F4;
	width: 100%;
}
/* Border bottom both side */
.form-input.border-bottom ~ .border-bottom-animation.both-side {
	height: 0px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before {
	left: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	right: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:after {
	background: #4285F4;
	width: 50%;
}

/* Border Animations */
/* Style 1 */
.form-input.border-animation {
	border: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after{
	position: absolute;
	content: " ";
	right: 0;
	background: #4285F4;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after
 {
	width: 0;
	height: 2px;
}
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after
 {
	width: 2px;
	height: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
	top: 0;
	right: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
	left: 0;
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
	top: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

/* Set 2 */
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:before {
	left: 50%;
	bottom: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:after {
	top: 0;
	left: 50%;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:before {
	top: 50%;
	left: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:after {
	top: 50%;
	right: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
	left: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:after {
	height: 100%;
	top: 0;
}

/* Set 3 */
.form-input.border-animation.set-3 ~ .border-line-animation.top:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.top:after {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:before {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:after {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:before {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:after {
	width: 100%;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:after {
	height: 100%;
}

/* Set 4 */

.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:before {
	left: 0;
	bottom: 0;
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before {
	transition-delay: 0s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:after {
	right: 0;
	bottom: 0;
	transition-delay: 1s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	transition-delay: .5s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:after {
	right: 0;
	top: 0;
	transition-delay: .5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	transition-delay: 1s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:before {
	left: 0;
	top: 0;
	transition-delay: 0;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before {
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}


Hope you guys liked the demo. Comment below for any suggestions or query. Thank you.

Read more
html,   css,   creative ... 

Text Animation Effects with Background and Gradient using Background Clip

 Techmates
 15 Feb, 2018

Hello folks, are you guys curious to see the background animation/effects inside the text itself? Then this demo is for you. The demo will show you the different animations/effects with background and gradient using the CSS background clip property inside the text.

**The demo is using advanced CSS properties. Only latest browsers which supports the CSS background-clip property will support this demo.

HTML Structure

<div class="box gradient-bg">
	<h2 class="title">Gradient Background Inside Text</h2>
</div>
<div class="box moving-gradient-block">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-gradient-block fast">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-piece-bg">
	<h2 class="title">Flash Text Animation Effect</h2>
</div>
<div class="box moving-piece-bg torch">
	<h2 class="title">Torch Text Animation Effect</h2>
</div>
<div class="gray-bg">
	<div class="box gradient-img smoke">
		<h2 class="title">Smoke Text Animation Effect</h2>
	</div>
</div>
<div class="box gradient-img">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div>
<div class="box gradient-img animate">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div>

CSS Styles

.title {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 70px;
	font-weight: 900;
	color: transparent;
}
.gray-bg {
	background: #1c1c1c;
}
.box {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid #ccc;
}

.box.gradient-bg {
	display: inline-block;
	background: -webkit-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: linear-gradient(to right, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.box.moving-gradient-block {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200% auto;
	-webkit-animation: animateBg 7.5s infinite linear;
	animation: animateBg 7.5s infinite linear;
}
.box.moving-gradient-block.fast {
	background-position: 0;
	background-size: 150px;
	animation-timing-function: linear;
}
@keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
@-webkit-keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
.box.moving-gradient-block .title {
	padding: 50px 20px;
	border: 10px solid rgba(255, 255, 255, .5);
	border-radius: 5px;
}

.box.moving-piece-bg {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 150px 100px;
	background-repeat: no-repeat;
	animation: animateBlockEffect 5s linear infinite;
}
.box.moving-piece-bg.torch {
	display: inline-block;
	background: -webkit-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: -o-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: linear-gradient(to right, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px 100px;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}
@keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		background-position: 115%;
	}
}
@-webkit-keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		-webkit-background-position: 115%;
	}
}

.box.gradient-img {
	display: inline-block;
	background: url('../2.jpg');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent; 
}

.box.gradient-img.smoke {
	display: inline-block;
	background: url('../1.png');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px;
	background-position: 0;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}

.box.animate {
	animation: animateBg 5s linear infinite;	
}

@media(max-width: 768px) {
	.title {
		font-size: 30px;
	}
	.box.moving-piece-bg, .box.moving-piece-bg.torch {
		background-size: 50px 100%;
	}
}

Hope you guys enjoyed the demo. Feel free to modify the code according to your need.


Read more
css,   creative,   animation ... 

Hamburger Circular Menu In CSS

 Techmates
 14 Feb, 2018

Hello geeks, This demo is used to create a hamburger circular menu effect using CSS and Javascript.

There are two variants of the menu. You can modify the demo and animation according to your need.

- data- attributes: dd-toggle to toggle the menu.

menu--top-left and menu--top-right are the position & animation classes. you can cusomize the code in CSS to change the animation/position.

HTML Structure

 <div class="menu menu--top-left" id="menu_top_left">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_left">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--top-right" id="menu_top_right">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_right">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS Styles

 .menu {
	position: fixed;
	width: 0;
	height: 0;
}
.menu.menu--top-left {
	top: 0;
	left: 0;
}
.menu.menu--top-right {
	top: 0;
	right: 0;
}
.menu:after {
	position: absolute;
	content: " ";
	background: #393E46;
	z-index: -1;
	width: 0;
	height: 0;
	-webkit-transition: all .5s cubic-bezier(0, 0, 0, 1);
	   -moz-transition: all .5s cubic-bezier(0, 0, 0, 1);
	    -ms-transition: all .5s cubic-bezier(0, 0, 0, 1);
	     -o-transition: all .5s cubic-bezier(0, 0, 0, 1);
	        transition: all .5s cubic-bezier(0, 0, 0, 1);
}
.menu.menu--top-left:after {
	border-bottom-right-radius: 100%;
	top: 0;
	left: 0;
}
.menu.menu--top-right:after {
	top: 0;
	right: 0;
	border-bottom-left-radius: 100%;
}
.menu.in:after {
	width: 50vh;
	height: 50vh;
}

.menu.in {
	width: 50vh;
	height: 50vh;
}

.menu .menu__hamburger_ico {
	position: relative;
	display: inline-block;
	background: #393E46;
	color: #fff;
	height: 70px;
	width: 70px;
	box-shadow: 0 0 0 20px #393E46;
	-webkit-transition: all .25s ease-in;
	   -moz-transition: all .25s ease-in;
	    -ms-transition: all .25s ease-in;
	     -o-transition: all .25s ease-in;
	        transition: all .25s ease-in;
	cursor: pointer;
	z-index: 99;
}
.menu.menu--top-right .menu__hamburger_ico {
	border-bottom-left-radius: 100%;
	float: right;
}
.menu.menu--top-left .menu__hamburger_ico {
	border-bottom-right-radius: 100%;
	float: left;
}

.menu .menu__hamburger_ico:hover {
	box-shadow: 0 0 0 10px #393E46;
}

.menu .menu__hamburger_ico span {
	position: absolute;
	display: inline-block;
	height: 3px;
	width: 40px;
	border-radius: 10px;
	background: #fff;
	-webkit-transition: all .25s cubic-bezier(0, 0, 1, 1);
	   -moz-transition: all .25s cubic-bezier(0, 0, 1, 1);
	    -ms-transition: all .25s cubic-bezier(0, 0, 1, 1);
	     -o-transition: all .25s cubic-bezier(0, 0, 1, 1);
	        transition: all .25s cubic-bezier(0, 0, 1, 1);
}
.menu.menu--top-left .menu__hamburger_ico span {
	left: 10px;
}
.menu.menu--top-right .menu__hamburger_ico span {
	right: 10px;
}
.menu .menu__hamburger_ico span:first-child {
	top: 20px;
}
.menu .menu__hamburger_ico span:nth-child(2) {
	top: 35px;
}
.menu .menu__hamburger_ico span:last-child {
	top: 50px;
}
.menu.menu--top-left .menu__hamburger_ico span:first-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:first-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico span:last-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:last-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu.menu--top-left .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu .menu__hamburger_ico.in span:nth-child(2) {
	opacity: 0;
}

.menu .menu__nav_list {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	top: 50%;
	-webkit-transform: translateY(-65%);
	   -moz-transform: translateY(-65%);
	    -ms-transform: translateY(-65%);
	     -o-transform: translateY(-65%);
	        transform: translateY(-65%);
}
.menu.menu--top-left .menu__nav_list {
	left: 25%;
	text-align: left;
}
.menu.menu--top-right .menu__nav_list {
	right: 25%;
	text-align: right;
}
.menu .menu__nav_list li a {
	position: relative;
	display: inline-block;
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	color: #fff;
	visibility: hidden;
	opacity: 0;
	text-decoration: none;
}
.menu.menu--top-left .menu__nav_list li a {
	-webkit-transform: translateX(-25px);
	   -moz-transform: translateX(-25px);
	    -ms-transform: translateX(-25px);
	     -o-transform: translateX(-25px);
	        transform: translateX(-25px);
}
.menu.menu--top-right .menu__nav_list li a {
	-webkit-transform: translateX(25px);
	   -moz-transform: translateX(25px);
	    -ms-transform: translateX(25px);
	     -o-transform: translateX(25px);
	        transform: translateX(25px);
}
.menu.in .menu__nav_list li a {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;

}
.menu.in .menu__nav_list li a:before {
	position: absolute;
	content: " ";
	width: 0;
	height: 2px;
	background: #fff;
	border-radius: 5px;
	top: 50%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.menu.in.menu--top-left .menu__nav_list li a:before {
	margin-left: -5px;
	left: -20px;
}
.menu.in.menu--top-right .menu__nav_list li a:before {
	margin-right: -5px;
	right: -20px;
}
.menu.in .menu__nav_list li a:hover:before {
	width: 20px;
}
.menu.in .menu__nav_list li:nth-child(1) a { transition-delay: .15s; }
.menu.in .menu__nav_list li:nth-child(2) a { transition-delay: .30s; }
.menu.in .menu__nav_list li:nth-child(3) a { transition-delay: .45s; }
.menu.in .menu__nav_list li:nth-child(4) a { transition-delay: .60s; }
.menu.in .menu__nav_list li:nth-child(5) a { transition-delay: .75s; }
.menu.in .menu__nav_list li:nth-child(6) a { transition-delay: .90s; }
.menu.in .menu__nav_list li:nth-child(7) a { transition-delay: 1.05s; }
.menu.in .menu__nav_list li:nth-child(8) a { transition-delay: 1.2s; }
.menu.in .menu__nav_list li:nth-child(9) a { transition-delay: 1.35s; }
.menu.in .menu__nav_list li:nth-child(10) a { transition-delay: 1.5s; }

Javascript

 $('[dd-toggle]').on('click', function() {
	var menu_id = $(this).attr('dd-toggle');
	$('#'+menu_id).toggleClass('in');
	$(this).toggleClass('in');
});

Hope you liked the demo. Have fun!

Read more
html,   css,   creative ... 

Text Animation Effects with Box and Shadow

 Techmates
 14 Feb, 2018

Hello folks, Toady we're going to learn how to create a fancy text animation effects using box and shadow. In this demo we've included the Shutter(from left, right and center) style animation, Fade in/out style animation, Smoke style animation. 


You can modify the demo according to your need.

HTML Structure

 <div class="box shutter-effect center">
	<h2 class="title">Text Shutter Animation: Center Center</h2>
</div>
<div class="box shutter-effect to-left">
	<h2 class="title">Text Shutter Animation: Left -> Right</h2>
</div>
<div class="box shutter-effect to-right">
	<h2 class="title">Text Shutter Animation: Right -> Left</h2>
</div>
<div class="box shadow-clip-effect">
	<h2 class="title">Text Shadow: fade in style</h2>
</div>
<div class="box shadow-effect">
	<h2 class="title">Text shadow: smoke style</h2>
</div>

CSS Styles

 .title {
	font-family: "Montserrat Alternates", sans-serif;
	position: relative;
	font-size: 60px;
	font-weight: 900;
	color: #393E46;
}
.box {
	position: relative;
	border: 1px solid #ccc;
	background: #fff;
	margin: -1px 0;
}
.box:after {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all 1.5s linear;
	   -moz-transition: all 1.5s linear;
	    -ms-transition: all 1.5s linear;
	     -o-transition: all 1.5s linear;
	        transition: all 1.5s linear;
	opacity: 1;
	background-position: 0 0;
}
.box.shutter-effect:after {
	background: radial-gradient(#fff 50%, rgba(221,221,221,0), #fff 50%);
	background-size: 100% 100%;
}

.box.shutter-effect.animate:after {
	opacity: .75;
}
.box.shutter-effect.center.animate:after {
	-webkit-transform: scaleX(0);
	   -moz-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	     -o-transform: scaleX(0);
	        transform: scaleX(0);
}
.box.shutter-effect.to-left.animate:after {
	left: 100%;
}

.box.shutter-effect.to-right.animate:after {
	right: 100%;
}

.box.shutter-effect.to-top.animate:after {
	top: 100%;
}
.box.shutter-effect.to-bottom.animate:after {
	bottom: 100%;
}

.box.shadow-effect .title {
	color: #2196f3;
}
.box.shadow-effect {
	position: relative;
	padding: 20px 50px;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background: #2196f3;
}
.box.shadow-effect:after {
	position: absolute;
	content: " ";
	margin: 0 auto;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 50px 0 rgba(255, 255, 255, .1);
	-webkit-transition: all 1.5s ease-out;
	   -moz-transition: all 1.5s ease-out;
	    -ms-transition: all 1.5s ease-out;
	     -o-transition: all 1.5s ease-out;
	        transition: all 1.5s ease-out;
	z-index: -1;
}
.box.shadow-effect.animate:after {
	box-shadow: 0 0 500px 1200px #ededed;
}
.box.shadow-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

.box.shadow-clip-effect {
	background: #ededed;
}
.box.shadow-clip-effect .title {
	color: transparent;
	text-stroke-width: -1px;
	-moz-text-stroke-width: -1px;
  	-webkit-text-stroke-width: -1px;
}
.box.shadow-clip-effect {
	position: relative;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.box.shadow-clip-effect:after {
	-webkit-transition: all 15s ease;
	   -moz-transition: all 15s ease;
	    -ms-transition: all 15s ease;
	     -o-transition: all 15s ease;
	        transition: all 15s ease;
}
.box.shadow-clip-effect.animate:after {
	box-shadow: 0 0 400px 1200px #ededed;
}
.box.shadow-clip-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

@media (max-width: 768px) {
	.title {
		font-size: 30px;
	}
}

Javascript

 $(document).ready(function(){
	setTimeout(function(){
		animateTexts();
	}, 250);
});
function animateTexts() {
	$('.box').addClass('animate');
}
$('#re_animate').click(function(event) {
	$('.box').removeClass('animate');
	setTimeout(function() { animateTexts() }, 1500);
});

Hope guys you liked the demo.

Read more
html,   css,   creative ... 

Loader Effects with Box/Characters in CSS

 Techmates
 13 Feb, 2018

Welcome guys, are you inquisitive to find beautiful loader box(loading characters) effect? Then this article is for you.

In this article we'd love to share a beautiful loader animation effects using CSS and JS with you.

This effect is fully dynamic  & customized. You can manage the loading speed change the animation etc... using the data- attributes.

List of the data- attributes to customize the effect.

  • dd-effect="{class-name}" to change the animation effect.
  • dd-transition-time="{time in ms}" to change the animation/transition time.
  • dd-remove-done-animated="{true/false}" to remove the animated elements.

Follow the code to create the loaders.

HTML Structure

 <div class="loading-characters padding-tb-l" dd-effect="layer" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="fade"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l" dd-effect="up-down"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="rotate-lf" dd-remove-done-animated="false" dd-transition-time="700"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="left-right" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-in" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-out" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>

CSS Styles

 .loading-characters.ovn span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters span {
	position: relative;
	display: inline-block;
	padding: 10px;
	background: darkred;
	font-size: 30px;
	width: 30px;
	margin: 0 3px;
	color: #fff;
	border-radius: 3px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.loading-characters.effect-fade span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(.9);
	   -moz-transform: scale(.9);
	    -ms-transform: scale(.9);
	     -o-transform: scale(.9);
	        transform: scale(.9);
}
.loading-characters.effect-fade span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-layer span.active {
	background: #3D84D6;
}
.loading-characters.effect-up-down span {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
	        opacity: 0;
}
.loading-characters.effect-up-down span.active {
	opacity: 1;
/*	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
*/	animation: upDownAnimation 2s ease-in-out;
}

@keyframes upDownAnimation {
	0% {
		-webkit-transform: translateY(-50px);
		   -moz-transform: translateY(-50px);
		    -ms-transform: translateY(-50px);
		     -o-transform: translateY(-50px);
		        transform: translateY(-50px);
	}
	50% {
		-webkit-transform: translateY(-5px);
		   -moz-transform: translateY(-5px);
		    -ms-transform: translateY(-5px);
		     -o-transform: translateY(-5px);
		        transform: translateY(-5px);	
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
}

.loading-characters.effect-left-right span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate(-25px);
	   -moz-transform: translate(-25px);
	    -ms-transform: translate(-25px);
	     -o-transform: translate(-25px);
	        transform: translate(-25px);
}
.loading-characters.effect-left-right span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0);
	   -moz-transform: translate(0);
	    -ms-transform: translate(0);
	     -o-transform: translate(0);
	        transform: translate(0);
}


.loading-characters.effect-rotate-lf span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters.effect-rotate-lf span.active {
	opacity: 1;
	visibility: visible;
	animation: rotateLoadingEffect .75s ease-in-out;
}

@keyframes rotateLoadingEffect {
	0% {
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		     -o-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(390deg);
		   -moz-transform: rotate(390deg);
		    -ms-transform: rotate(390deg);
		     -o-transform: rotate(390deg);
		        transform: rotate(390deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
		    -ms-transform: rotate(360deg);
		     -o-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}


.loading-characters.effect-zoom-in span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.loading-characters.effect-zoom-in span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-zoom-out span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(4);
	   -moz-transform: scale(4);
	    -ms-transform: scale(4);
	     -o-transform: scale(4);
	        transform: scale(4);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.loading-characters.effect-zoom-out span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

Javascript

 // var total_length = $('.loading-characters span').length;
var transition_time;
$('.loading-characters').each(function() {
	var count = 0;
	var effect = 'effect-'+$(this).attr('dd-effect');
	var total_length = $(this).children('span').length;
	var transition_time = ( $(this).attr('dd-transition-time') == undefined ? 500 : Number($(this).attr('dd-transition-time')));
	$(this).addClass('effect-'+$(this).attr('dd-effect'));
	loadingEffect(count, effect, transition_time, total_length);
});
// loadingEffect(count);
function loadingEffect(count, effect, transition_time, total_length) {
	if( count < total_length ) {
		count++;
		setTimeout(function() {
			$('.loading-characters.'+effect+' span:nth-child('+count+')').addClass('active');
			loadingEffect(count, effect, transition_time, total_length);
		}, transition_time);
		setTimeout(function() {
			if( $('.loading-characters.'+effect).attr('dd-remove-done-animated') != 'false' ) {
				$('.loading-characters.'+effect+' span:nth-child('+(count - 1)+')').removeClass('active');
			}
		}, transition_time);
	} else {
		setTimeout(function() {
			$('.loading-characters.'+effect+' span').removeClass('active');
		}, transition_time);
		count = -1;
		loadingEffect(count, effect, transition_time, total_length);
	}
}

To run this script you must have to include the jQuery library.

Hope you guys like this demo and use it in your own projects.

Read more
html,   css,   creative ... 

Hamburger Menu to Slide Nav Animation

 Techmates
 13 Feb, 2018

Hello folks, are you guys curious to see how to use a hamburger button(FAB) for a quick navigation menu? Then this is the article for you.

In this article we'd love to share how you can use hamburger menu for navigation.

The code is fully customizable. You can change the animation, classes and add your own styles/animation.

To change the hamburger position and animation direction, below are the list of classes:

  • menu--top-left (top left corner)
  • menu--top-right (top right corner)
  • menu--bottom-left (bottom left corner)
  • menu--bottom-right (bottom right corner)
  • menu--center-center (center)

HTML Structure

 <div class="menu menu--top-left menu-closed" id="menu_top_left">
	<a class="menu__btn" dd-nav-expand="menu_top_left"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--top-right menu-closed" id="menu_top_right">
	<a class="menu__btn" dd-nav-expand="menu_top_right"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--bottom-left menu-closed" id="menu_bottom_left">
	<a class="menu__btn" dd-nav-expand="menu_bottom_left"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#"><i class="fab fa-facebook"></i></a></li>
		<li><a href="#"><i class="fab fa-twitter"></i></a></li>
		<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
		<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
		<li><a href="#"><i class="fab fa-youtube"></i></a></li>
	</ul>
</div>
<div class="menu menu--bottom-right menu-closed" id="menu_bottom_right">
	<a class="menu__btn" dd-nav-expand="menu_bottom_right"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#"><i class="fab fa-facebook"></i></a></li>
		<li><a href="#"><i class="fab fa-twitter"></i></a></li>
		<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
		<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
		<li><a href="#"><i class="fab fa-youtube"></i></a></li>
	</ul>
</div>
<div class="menu menu--center-center menu-closed" id="menu_center_center">
	<a class="menu__btn" dd-nav-expand="menu_center_center"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS Styles


 .menu {
	position: relative;
	padding: 0;
	display: inline-block;
	z-index: 9999;
	border-radius: 100%;
}
.menu.menu-closed {
	width: 50px;
	height: 50px;
}
.menu.collapse {
	border-radius: 4px;
}
.menu:after {
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
	border-radius: 50%;
	z-index: -1;
	overflow: hidden;
	-webkit-transition: width .5s, height .25s;
	   -moz-transition: width .5s, height .25s;
	    -ms-transition: width .5s, height .25s;
	     -o-transition: width .5s, height .25s;
	        transition: width .5s, height .25s;
}
.menu.collapse:after {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.menu.menu--top-left:after {
	top: 0;
	left: 0;
}

.menu.menu--top-right:after {
	top: 0;
	right: 0;
}

.menu.menu--top-left {
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
}

.menu.menu--top-right {
	position: absolute;
	right: 0;
	top: 0;
	text-align: left;
}

.menu.menu--bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
}

.menu.menu--bottom-left:after {
	bottom: 0;
	left: 0;
}
.menu.menu--bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: left;
}
.menu.menu--bottom-right:after {
	bottom: 0;
	right: 0;
}

.menu.menu--center-center {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	text-align: left;
	margin: 0 auto;
}

.menu.menu--center-center:after {
	margin: 0 auto;
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);

	left: 0;
	right: 0;
}

.menu .menu__btn {
	position: absolute;
	cursor: pointer;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
.menu .menu__list {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	list-style: none;
	padding: 0;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
	visibility: hidden;
	opacity: 0;
}
.menu.collapse .menu__list {
	visibility: visible;
	opacity: 1;
	height: inherit;
}

.menu .menu__list li a {
	position: relative;
	display: inline-block;
	color: #393E46;
	width: 100%;
	padding: 10px 25px;
	text-decoration: none;
	font-weight: bolder;
	opacity: 0;
}

.menu.collapse .menu__list li a {
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
	opacity: 1;
}
.menu.menu--center-center .menu__list li a {
	-webkit-transform: translateY(-10px);
	   -moz-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	     -o-transform: translateY(-10px);
	        transform: translateY(-10px);
}
.menu.collapse.menu--center-center .menu__list li a {
	-webkit-transform: translateY(0);
	   -moz-transform: translateY(0);
	    -ms-transform: translateY(0);
	     -o-transform: translateY(0);
	        transform: translateY(0);
}
.menu.menu--top-left .menu__list li a, .menu.menu--bottom-left .menu__list li a {
	-webkit-transform: translateX(-10px);
	   -moz-transform: translateX(-10px);
	    -ms-transform: translateX(-10px);
	     -o-transform: translateX(-10px);
	        transform: translateX(-10px);
}
.menu.collapse.menu--top-left .menu__list li a, .menu.collapse.menu--bottom-left .menu__list li a {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.menu.menu--top-right .menu__list li a, .menu.menu--bottom-right .menu__list li a {
	-webkit-transform: translateX(10px);
	   -moz-transform: translateX(10px);
	    -ms-transform: translateX(10px);
	     -o-transform: translateX(10px);
	        transform: translateX(10px);
}
.menu.collapse.menu--top-right .menu__list li a, .menu.collapse.menu--bottom-right .menu__list li a {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.menu.collapse .menu__list li:nth-child(1) a {transition-delay: 0s;}
.menu.collapse .menu__list li:nth-child(2) a {transition-delay: .2s;}
.menu.collapse .menu__list li:nth-child(3) a {transition-delay: .4s;}
.menu.collapse .menu__list li:nth-child(4) a {transition-delay: .6s;}
.menu.collapse .menu__list li:nth-child(5) a {transition-delay: .8s;}
.menu.collapse .menu__list li:nth-child(6) a {transition-delay: 1s;}
.menu.collapse .menu__list li:nth-child(7) a {transition-delay: 1.2s;}
.menu.collapse .menu__list li:nth-child(8) a {transition-delay: 1.4s;}
.menu.collapse .menu__list li:nth-child(9) a {transition-delay: 1.6s;}
.menu.collapse .menu__list li:nth-child(10) a {transition-delay: 1.8s;}

Javascript

 $('[dd-nav-expand]').on('click', function(){
	$(this).hide();
	var menu_id = $(this).attr('dd-nav-expand');
	$('#'+menu_id).removeClass('menu-closed');
	$('#'+menu_id).addClass('collapse');
});

$('html').on('click', function(){
	$('[dd-nav-expand]').each(function(){
		$(this).show();
		var menu_id = $(this).attr('dd-nav-expand');
		$('#'+menu_id).addClass('menu-closed');
		$('#'+menu_id).removeClass('collapse');
	});
});

$('.menu').on('click', function(event){
	event.stopPropagation();
});

Hope you guys liked the demo.

Read more
html,   css,   animation ...