html点击五角星评分,CSS3 星星打分

css

body {

text-align: center;

background-color: #34495e;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

h1 {

color: #FFF;

font-weight: 500;

padding: 30px;

text-shadow: 0 3px 3px #2b3c4e;

}

input {

display: none;

}

label {

cursor: pointer;

font-size: 40px;

color: yellow;

display: block;

width: 50px;

height: 50px;

line-height: 60px;

text-align: center;

float: left;

-moz-transition: all 0.2s;

-o-transition: all 0.2s;

-webkit-transition: all 0.2s;

transition: all 0.2s;

text-shadow: 0 3px 3px #2b3c4e;

}

label:hover {

font-size: 50px;

color: #FFF;

text-shadow: 0 0 5px #b9c9d8;

}

label:before {

display: inline;

width: auto;

height: auto;

line-height: normal;

vertical-align: baseline;

margin-top: 0;

font-family: FontAwesome;

font-weight: normal;

font-style: normal;

text-decoration: inherit;

-webkit-font-smoothing: antialiased;

content: "\f005";

}

input:checked + label ~ label:before {

content: "\f006";

}

#wrapper {

display: inline-block;

}

#wrapper:hover label:before {

content: "\f005";

}

#wrapper:hover label:hover ~ label:before {

content: "\f006";

}