flexing-pagination Slide Show css3 LUCU BANGET

 

 

flexing-pagination

flexing-pagination Slide Show css3 LUCU BANGET –

Nih gan hasil eksperiment Hakim lucu banget flexing-pagination

Lihat DEMO nya DISINI

Langsung copy aja kode cssnya gan buat di ulik-ulik lagi

body {
margin: 0;
background: #33ab83;
font-family: Helvetica, sans-serif; }

button {
-webkit-appearance: none;
background: transparent;
border: 0;
outline: 0; }

.paginate {
position: relative;
margin: 10px;
width: 50px;
height: 50px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
top: 50%;
margin-top: -20px;
-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2)); }
.paginate i {
position: absolute;
top: 40%;
left: 0;
width: 50px;
height: 5px;
border-radius: 2.5px;
background: #fff;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease; }
.paginate.left {
right: 58%; }
.paginate.left i {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%; }
.paginate.left i:first-child {
-webkit-transform: translate(0, -1px) rotate(40deg);
-moz-transform: translate(0, -1px) rotate(40deg);
-ms-transform: translate(0, -1px) rotate(40deg);
transform: translate(0, -1px) rotate(40deg); }
.paginate.left i:last-child {
-webkit-transform: translate(0, 1px) rotate(-40deg);
-moz-transform: translate(0, 1px) rotate(-40deg);
-ms-transform: translate(0, 1px) rotate(-40deg);
transform: translate(0, 1px) rotate(-40deg); }
.paginate.left:hover i:first-child {
-webkit-transform: translate(0, -1px) rotate(30deg);
-moz-transform: translate(0, -1px) rotate(30deg);
-ms-transform: translate(0, -1px) rotate(30deg);
transform: translate(0, -1px) rotate(30deg); }
.paginate.left:hover i:last-child {
-webkit-transform: translate(0, 1px) rotate(-30deg);
-moz-transform: translate(0, 1px) rotate(-30deg);
-ms-transform: translate(0, 1px) rotate(-30deg);
transform: translate(0, 1px) rotate(-30deg); }
.paginate.left:active i:first-child {
-webkit-transform: translate(1px, -1px) rotate(25deg);
-moz-transform: translate(1px, -1px) rotate(25deg);
-ms-transform: translate(1px, -1px) rotate(25deg);
transform: translate(1px, -1px) rotate(25deg); }
.paginate.left:active i:last-child {
-webkit-transform: translate(1px, 1px) rotate(-25deg);
-moz-transform: translate(1px, 1px) rotate(-25deg);
-ms-transform: translate(1px, 1px) rotate(-25deg);
transform: translate(1px, 1px) rotate(-25deg); }
.paginate.left[data-state=disabled] i:first-child {
-webkit-transform: translate(-5px, 0) rotate(0deg);
-moz-transform: translate(-5px, 0) rotate(0deg);
-ms-transform: translate(-5px, 0) rotate(0deg);
transform: translate(-5px, 0) rotate(0deg); }
.paginate.left[data-state=disabled] i:last-child {
-webkit-transform: translate(-5px, 0) rotate(0deg);
-moz-transform: translate(-5px, 0) rotate(0deg);
-ms-transform: translate(-5px, 0) rotate(0deg);
transform: translate(-5px, 0) rotate(0deg); }
.paginate.left[data-state=disabled]:hover i:first-child {
-webkit-transform: translate(-5px, 0) rotate(0deg);
-moz-transform: translate(-5px, 0) rotate(0deg);
-ms-transform: translate(-5px, 0) rotate(0deg);
transform: translate(-5px, 0) rotate(0deg); }
.paginate.left[data-state=disabled]:hover i:last-child {
-webkit-transform: translate(-5px, 0) rotate(0deg);
-moz-transform: translate(-5px, 0) rotate(0deg);
-ms-transform: translate(-5px, 0) rotate(0deg);
transform: translate(-5px, 0) rotate(0deg); }
.paginate.right {
left: 58%; }
.paginate.right i {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.paginate.right i:first-child {
-webkit-transform: translate(0, 1px) rotate(40deg);
-moz-transform: translate(0, 1px) rotate(40deg);
-ms-transform: translate(0, 1px) rotate(40deg);
transform: translate(0, 1px) rotate(40deg); }
.paginate.right i:last-child {
-webkit-transform: translate(0, -1px) rotate(-40deg);
-moz-transform: translate(0, -1px) rotate(-40deg);
-ms-transform: translate(0, -1px) rotate(-40deg);
transform: translate(0, -1px) rotate(-40deg); }
.paginate.right:hover i:first-child {
-webkit-transform: translate(0, 1px) rotate(30deg);
-moz-transform: translate(0, 1px) rotate(30deg);
-ms-transform: translate(0, 1px) rotate(30deg);
transform: translate(0, 1px) rotate(30deg); }
.paginate.right:hover i:last-child {
-webkit-transform: translate(0, -1px) rotate(-30deg);
-moz-transform: translate(0, -1px) rotate(-30deg);
-ms-transform: translate(0, -1px) rotate(-30deg);
transform: translate(0, -1px) rotate(-30deg); }
.paginate.right:active i:first-child {
-webkit-transform: translate(1px, 1px) rotate(25deg);
-moz-transform: translate(1px, 1px) rotate(25deg);
-ms-transform: translate(1px, 1px) rotate(25deg);
transform: translate(1px, 1px) rotate(25deg); }
.paginate.right:active i:last-child {
-webkit-transform: translate(1px, -1px) rotate(-25deg);
-moz-transform: translate(1px, -1px) rotate(-25deg);
-ms-transform: translate(1px, -1px) rotate(-25deg);
transform: translate(1px, -1px) rotate(-25deg); }
.paginate.right[data-state=disabled] i:first-child {
-webkit-transform: translate(5px, 0) rotate(0deg);
-moz-transform: translate(5px, 0) rotate(0deg);
-ms-transform: translate(5px, 0) rotate(0deg);
transform: translate(5px, 0) rotate(0deg); }
.paginate.right[data-state=disabled] i:last-child {
-webkit-transform: translate(5px, 0) rotate(0deg);
-moz-transform: translate(5px, 0) rotate(0deg);
-ms-transform: translate(5px, 0) rotate(0deg);
transform: translate(5px, 0) rotate(0deg); }
.paginate.right[data-state=disabled]:hover i:first-child {
-webkit-transform: translate(5px, 0) rotate(0deg);
-moz-transform: translate(5px, 0) rotate(0deg);
-ms-transform: translate(5px, 0) rotate(0deg);
transform: translate(5px, 0) rotate(0deg); }
.paginate.right[data-state=disabled]:hover i:last-child {
-webkit-transform: translate(5px, 0) rotate(0deg);
-moz-transform: translate(5px, 0) rotate(0deg);
-ms-transform: translate(5px, 0) rotate(0deg);
transform: translate(5px, 0) rotate(0deg); }
.paginate[data-state=disabled] {
opacity: 0.3;
cursor: default; }

.counter {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -15px;
font-size: 30px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
color: #fff; }

 

Segitu gan codenya kalo mau filenya boleh donload disini gan

Leave a Reply