Home > Article > Web Front-end > Example of using CSS to implement a tornado using custom cursor styles

Example of using CSS to implement a tornado using custom cursor styles

高洛峰Original: 2017-03-04 10:00:431511browse

The test environment is the chrome browser

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36

css Style

p
{
　　cursor:url(&#39;1.jpg&#39;),pointer;
}
HTML
<body>
　　<p style="width:100px;height:100px;background-color:red;"></p>
</body>

When the mouse is placed on p, the cursor will change into the pattern you specified

*Notes

Make sure the customized picture is small enough, here is 16*16

Different browsers support different image formats, please search by yourself

cursor:url('1.jpg'),pointer;The 1.jpg here must be the same as the current html The file is in the same level directory, and pointer is necessary. It is a backup plan when the customized picture cannot be applied. It would be wrong not to write it in this test.

The implementation of the above CSS using custom cursor styles_Escape tornado is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more related articles on examples of CSS using custom cursor styles to achieve an underground tornado, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth understanding of (display, float, position) in cssNext article：In-depth understanding of (display, float, position) in css

See more

Example of using CSS to implement a tornado using custom cursor styles

Related articles