css3 图钉,CSS3 带图钉动画的切换开关

CSS

语言：

CSSSCSS

确定

@import "compass/css3";

*, *:after, *:before{

@include box-sizing(border-box);

}

$prim : #4285F4;

$dark : #347DFB;

body{

text-align: center;

background: $prim;

padding: 100px;

}

/*=====================*/

.checkbox{

position: relative;

display: inline-block;

label{

width: 90px;

height: 42px;

background: #D7E7FF;

position: relative;

display: inline-block;

@include border-radius(46px);

@include transition(.4s);

&:after, &:before{

content: '';

position: absolute;

width: 50px;

height: 50px;

@include border-radius(100%);

right: 0;

top: -5px;

background: #fff;

@include box-shadow(0 0 5px rgba(0,0,0,.2));

@include transition(.4s);

}

&:before{

content: '\f08d';

font-family: FontAwesome;

font-weight: normal;

font-size: 24px;

line-height: 50px;

color: $prim;

z-index: 1;

overflow: hidden;

@include animation(.5s pin-off forwards)

}

}

input{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 5;

opacity: 0;

cursor:pointer;

&:hover +label:after{

@include box-shadow(0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15))

}

&:checked + label{

background: $dark;

&:after, &:before{

background: $prim;

color: #fff;

right: 40px;

}

&:before{

@include animation(.5s pin-on forwards);

}

}

}

}

@include keyframes(pin-on){

80%{ line-height: 150px;}

85%{ line-height: 1px; @include rotate(45deg); opacity:0}

100%{ line-height: 50px; opacity:1; @include rotate(45deg)}

}

@include keyframes(pin-off){

0%{@include rotate(45deg)}

80%{ line-height: 150px; }

85%{ line-height: 1px; opacity:0}

100%{ line-height: 50px; opacity:1; }

}