Using CSS to realize hover dynamic effect

A special effect on the text hover, can be used to adjust the element CSS properties to complete, although only to achieve some simple action, carefully combined can achieve satisfactory results.

1. Font CHANGE:

<!DOCTYPE HTML><HTMLLang= "en">    <Head>        <MetaCharSet= "UTF-8">        <title>Test</title>        <style>Em:hover{font-size:2em;  }Strong:hover{Font-weight:Normal;  }Span:hover{Color:Blue; }        </style>    </Head>    <Body>        <em>Suspension becomes larger</em><BR>        <strong>Suspension thinning</strong><BR>        <span>Color of floating variable</span>    </Body></HTML>

The results are as follows:

Suspension becomes larger
Suspension Thinning
color of floating variable

2. Zoom and Rotate:

<!DOCTYPE HTML><HTMLLang= "en">    <Head>        <MetaCharSet= "UTF-8">        <title>Title</title>        <style>            *{transition:All linear 2s;}Em:hover{Display:Inline-block;Transform:Scale (2);  }Span:hover{Display:Inline-block;Transform:Rotate (360deg);   }        </style>    </Head>    <Body>        <span>Hover here to rotate</span>        <em>Hover here to enlarge</em>    </Body></HTML>

The results are as follows:

hover here to rotate hover here to enlarge

Can look large, here the amplification does not affect the row height as above, more is a kind of projection effect.

3. Change the background and frame:

<!DOCTYPE HTML><HTMLLang= "en">    <Head>        <MetaCharSet= "UTF-8">        <title>Title</title>        <style>. Background{width:200px;Height:50px;  }. Background:hover{background:Yellowgreen; }. Border{width:200px;Height:50px;Border:2px Solid Transparent;  }. Border:hover{Border:2px solid Black;}        </style>    </Head>    <Body>    <Pclass= "Background">hover here to show background color</P>    <Pclass= "Border">hover here appears border</P>    </Body></HTML>

The results are as follows:

Hover here to show background color

Hover here appears border

To not affect the position after the border display changes, so the border is set to transparent color, if you want to achieve a dynamic effect, you can not hover without a border, so that the text will be suspended when there is a dynamic process.

Using CSS to realize hover dynamic effect