How to use css to achieve a rate score
Today, I would like to share with you how to use css to achieve a rate score related knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.
Sort it out as follows:
Find a good-looking iconfont, [Iconfont- Alibaba vector icon library],
Borrow 5 radio checkboxes to remove the default styles and display the default stars
Use the checked pseudo-class to monitor the user's selection, and change the default star to a highlighted star.
Then cooperate-- the sibling operator highlights all the currently selected sibling elements together
Arrange the five radio checkboxes in reverse
Code
This is my business, sir. All right, iconfont.
A very simple layout:
First show the default stars:
/ / remove the default style
Input {
-webkit-appearance: none
Border: none
Outline: none
Cursor: pointer
}
. rate-content {
$main: # ffa822; / / highlight color
$basic: # 999; / / default color
/ / single star
Input [name= "rate"] {
Font-family: "iconfont"; / / iconfont fonts introduced earlier
Font-size: 30px
Padding-right: 10px
/ / the stars displayed by default
&:: after {
Content: "\ e645"
Color: $basic
Transition: color .4s ease; / / add a little color transition effect
}
}
}
Achieve the selection of a single star:
Input [name= "rate"] {
/ / highlight the stars
&: checked {
&:: after {
Content: "\ e73c"
Color: $main
}
}
}
The implementation highlights along with the sibling elements:
Input [name= "rate"] {
/ / highlight the stars
&: checked
&: checked-input [name= "rate"] {
...
}
}
The effect is as follows:
Then arrange the input in reverse:
. rate-content {
Display: flex
Flex-flow: row-reverse
}
Move the mouse in to preview the selected effect:
Luo version:
Input [name= "rate"] {
/ / highlight the stars
&: checked
&: checked-input [name= "rate"]
&: hover
&: hover-input [name= "rate"] {
...
}
}
Optimized version:
Input [name= "rate"] {
/ / highlight the stars
&: checked
&: hover {
&:: after {
Content: "\ e73c"
Color: $main
}
/ / Brotherhood elements highlight together
&-input [name= "rate"] {
&:: after {
Content: "\ e73c"
Color: $main
}
}
}
}
Add magnified animation
Input [name= "rate"] {
Transition: transform .2s ease; / / add transition effect
/ / highlight the stars
&: checked
&: hover {
...
}
/ / move the mouse in to enlarge the stars
&: hover {
Transform: scale (1.2)
}
}
Summary
The core code is actually these two paragraphs, and the others are optional.
Elements are arranged in reverse:
Display: flex
Flex-flow: row-reverse
Sibling element operation:
Input:checked-input
If you do not use flex reverse arrangement, you can also use rotateZ:
. rate-content {
Display: flex
/ / flex-flow: row-reverse
Transform: rotateZ (180deg)
}
After the z axis rotates the 180deg, it is found that the head and tail of the star are reversed, so the child element can also rotate the 180deg:
. rate-content {
Input [name= "rate"] {
Transform: rotateZ (180deg)
}
}
Details to pay attention to
Input [name= "rate"] {
/ / padding-right: 10px
Margin-right: 10px
}
These are all the contents of the article "how to achieve a rate score with css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
