html语言切换插件,CSS3 不错的一款国家/语言切换控件

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway);

html {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

height: 100%;

background-color: #2d4b6f;

}

*,

*:before,

*:after {

box-sizing: border-box;

}

.flag-switch {

position: relative;

}

.flag-switch:before,

.flag-switch:after {

position: absolute;

color: white;

font-family: 'Raleway', sans-serif;

top: 42px;

}

.flag-switch:before {

left: -5px;

content: attr(data-first-lang);

}

.flag-switch:after {

right: -5px;

content: attr(data-second-lang);

}

.flag-switch input {

position: relative;

margin: 36px;

width: 30px;

height: 30px;

cursor: pointer;

}

.flag-switch input:before,

.flag-switch input:after {

content: "";

position: absolute;

border-radius: 30px;

}

.flag-switch input:before {

height: 30px;

width: 60px;

background-color: #ee4b5e;

-webkit-transform: translate(-25%, 0);

-ms-transform: translate(-25%, 0);

transform: translate(-25%, 0);

-webkit-transition: all 0.25s ease-in-out;

transition: all 0.25s ease-in-out;

}

.flag-switch input:after {

border: 2px solid #dfdfdf;

width: 24px;

height: 24px;

margin: 10%;

background: #eb3 url(http://i.imgur.com/pxxUsQs.jpg) -26px center;

-webkit-transform: translateX(15px);

-ms-transform: translateX(15px);

transform: translateX(15px);

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.flag-switch input:checked:after {

background: #000233 url(http://i.imgur.com/pxxUsQs.jpg) -2px center;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

-webkit-transform: translateX(-15px);

-ms-transform: translateX(-15px);

transform: translateX(-15px);

}

.flag-switch input:checked:before {

background-color: #1fa9d6;

}