Hello Readers!
We developers find every solution to deal with different codes and reached to final solution in the end, I thought previously that this transition effect would be possible using only jQuery. But here we used only pureCSS that will help to complete this task in a very easy and compact way. User can see in the HTML code, I used one main div followed by input check-box and the label with it, The label class name should be same with the input id and this label have three children-div. While In CSS code we used "~ sign" for making a connection between the input-box, label and the siblings div, as we are checking the checked state and putting the opacity property to the middle of the div and in first and third div will have same transition property that will rotate on different direction making cross sign to it.
Below is the source code that will be expalin each thing in a easy manner.
<!DOCTYPE HTML>
<html>
<head>
<style>
.spinner-master * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}
.spinner-master {position:relative;margin:50px auto;height:50px;width:50px;}
.spinner-master input[type=checkbox] {display:none;}
.spinner-master label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0;}
.spinner-master .spinner {position:absolute;height:5px;width:100%;background-color:#000;}
.spinner-master .diagonal.part-1 {position:relative;float:left;}
.spinner-master .horizontal {position:relative;float:left;margin-top:6px;}
.spinner-master .diagonal.part-2 {position:relative;float:left;margin-top:6px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {opacity: 0;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(405deg);-webkit-transform:rotate(405deg);margin-top:10px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-405deg);-webkit-transform:rotate(-405deg);margin-top:-16px;}
</style>
</head>
<body>
<div class="spinner-master">
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>
</body>
</html>
For Output:- Download below file.
0 Comment(s)