Use css3 cursor: zoom-in/zoom-out to achieve micro-blog to see the image magnifier effect, css3zoom-in

Use css3 cursor: zoom-in/zoom-out to achieve micro-blog to see the image magnifier effect, css3zoom-in

1. Preface 
The emergence of CSS3 solves a lot of headaches, at least I think many children's shoes think so. The cursor attribute of css3 is usually used in many scenarios, such as cursor: pointer, cursor: help, cursor: text, and so on. Cursor: zoom-in/zoom-out is rarely used. Today, let's talk about the usage of these two attribute values.
2. Introduction 

Definition and usage of cursor

　　The cursor attribute specifies the cursor and type (SHAPE) to be displayed ). Defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element. The default value is auto. Most common values are as follows:

Crosshair	Cross Accuracy
Pointer; hand (IE5 only knows hand)	Hand shape
Wait	Wait (hourglass)
Help	Help
No-drop	Cannot be released
Text	Text/edit
Move	Movable object
N-resize	Change the size up
S-resize	Change the size down
E-resize	Change size to the right
W-resize	Change size to left
Ne-resize	Change the size from top to right
Nw-resize	Change the size to the upper base
Sw-resize	Change the size from left to left
Se-resize	Change the size from bottom to right
Auto	Automatic
Not-allowed	Disable
SS	Processing
Default	Default (usually an arrow)
Url ('#') file format must be. cur or. ani	User-Defined

 

Some cursor reference images are as follows:

　　

Zoom-in/zoom-out is to convert the Mouse shape of the element into a "magnifier"/"small mirror" effect; for example:

 

With this attribute, we don't have to create a. cur magnifier file and. cur small mirror file by ourselves. We can simply use this attribute instead. However, this attribute is not supported by IE11 (including IE11), but is supported by other browsers. If your project requires high compatibility, you have to create two. cur files.
The specific css style is written as follows:

 1 .zoom-in{ 2     cursor: -moz-zoom-in; 3     cursor: -webkit-zoom-in; 4     cursor: zoom-in; 5     cursor: url(../images/big.cur); 6 } 7 .zoom-out{ 8     cursor: -moz-zoom-out; 9     cursor: -webkit-zoom-out;10     cursor: zoom-out;11     cursor: url(../images/small.cur);12 }

You can click here to view the effect. The clicked image is displayed in the center of the page.

3. Extend 
Another cursor similar to this attribute value: grab/grabbing. this is to turn the Mouse shape of the element into a hand shape, Zhang said, commonly known as "Salted pig" and "milk grabbing ". (Not What I Said );
This is mainly used to achieve the effect of dragging and moving content; with this attribute, it is more convenient
The image effect is as follows:

The css code is as follows (if the browser is compatible, add a. cur file)

1. grab {/* capture */2 cursor:-webkit-grab; 3 cursor:-moz-grab; 4 cursor: grab; 5 cursor: url (.. /images/grab. cur); 6} 7. grabbing {/* Grab and drag */8 cursor:-webkit-grabbing; 9 cursor:-moz-grabbing; 10 cursor: grabbing; 11 cursor: url (.. /images/grabbing. cur); 12}

4. Summary 
Css3 has many good attributes, so it is easy to use. And the effect is quite high. So we need to take a look at css3. there is no end to learning! Everyone should join us!