CSS3 the effect of changing the style when the mouse moves in and out

1, using pseudo class to implement style switching

Pseudo-Class is a new feature that occurs when CSS2.1, so many of the effects that need to be JavaScript can be done using CSS.
For example, to achieve the following mouse hover effect, as long as: hover pseudo class to apply a new set of styles. When the guest mouse moves over the button, the browser automatically applies the new style to the button.

code is as follows	copy code
< Style> . Slickbutton {     color:white;     font-weight:bold;  & nbsp;  padding:10px;     border:solid 1px black;     Background:lightgreen;     Cursor:pointer; }   . slickbutton:hover {     color:black     background: Yellow; }   <button class= "Slickbutton" >HANGGE.COM</BUTTON>

2, using CSS3 transition function to achieve color transition
Although the use of pseudo classes to achieve the change in style, but because there is no transition effect will appear very blunt. In the past, if you want to implement the transition, you need to use the third party JS framework to achieve. Now you can switch smoothly from one group of styles to another by using the CSS3 Transition (transition) feature.

(1) Background color transition change

When the following mouse is moved in, the button background color will slowly turn yellow. The mouse leaves, the transition effect will occur, the color back to the original state.

/tbody>

code is as follows	copy code
<style> . Slickbutton {     color:white;     Font-weight:bold;     padding:10px;     border:solid 1px black;     Background:lightgreen;     Cursor:pointer;     Transition:background 0.5s;    -webkit-transition:background 0.5s; }   . slickbutton:hover {     color:black     background: Yellow; } </style>   <button class= "Slickbutton" >HANGGE.COM</BUTTON>

(2) Background color, text needs a transition effect
The example above sees that although the background color realizes the transition, the text color changes directly. To implement multiple style transitions, simply use a comma as a separator and make multiple style properties.

The code is as follows	Copy Code
<style> . Slickbutton { Color:white; Font-weight:bold; padding:10px; Border:solid 1px black; Background:lightgreen; Cursor:pointer; Transition:background 0.5s, Color 0.5s; -webkit-transition:background 0.5s, Color 0.5s; } . slickbutton:hover { Color:black; Background:yellow; } </style> <button class= "Slickbutton" >hangge.com</button>

(3) Transition all styles

If you want to transition all styles, and you want all transitions to be synchronized, you can fill in all at the specified property name.

The code is as follows	Copy Code
Transition:all 0.5s; -webkit-transition:all 0.5s;

3, more transition effects
(1) Fade and fade
Change the transparency by modifying the Opacity property to make the image fade in and out.

The code is as follows	Copy Code
<style> . slickButton2 { Color:white; Font-weight:bold; padding:10px; Border:solid 1px black; Background:lightgreen; Cursor:pointer; opacity:0.5; Transition:opacity 0.5s; -webkit-transition:opacity 0.5s; } . slickbutton2:hover { Opacity:1; } <button class= "SlickButton2" >hangge.com</button>

(2) Shadow (projection) effect
Use the Box-shadow property to add a shadow to any box element to create a nice hover effect.

The code is as follows	Copy Code
<style> . slickButton3 { Color:white; Font-weight:bold; padding:10px; Border:solid 1px black; Background:lightgreen; Cursor:pointer; Transition:box-shadow 0.5s; -webkit-transition:box-shadow 0.5s; } . slickbutton3:hover { box-shadow:5px 5px 10px Gray; } </style> <button class= "SlickButton3" >hangge.com</button>

(3) Luminous effect

The same can be achieved by using the Box-shadow property, except that the shadow offset is set to 0.

The code is as follows	Copy Code
<style> . slickButton4 { Color:white; Font-weight:bold; padding:10px; Border:solid 1px black; Background:lightgreen; Cursor:pointer; Transition:box-shadow 0.5s; -webkit-transition:box-shadow 0.5s; } . slickbutton4:hover { box-shadow:0px 0px 20px Orange; } </style> <button class= "SlickButton4" >hangge.com</button>

4, the following style is not worth using the transition effect

For internal margin (padding), outer margin (margin), and font size (font-size). If applied because the browser wants to recalculate layout size or text hints, this transition consumes more power and can cause slow and sticky responses.
If you want to move, zoom in, and shrink elements, it's best to use warp technology.