十分钟实现鼠标悬停效果，CSS3悬停效果-蒲公英云

十分钟实现鼠标悬停效果，CSS3悬停效果

视频：https://www.bilibili.com/video/BV1cy4y1D7mz

十分钟实现鼠标悬停效果，CSS3悬停效果

font awesome 图标使用方法参考网站：

https://fontawesome.dashgame.com/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鼠标悬停效果:微信公众号AlbertYang</title>
        <link rel="stylesheet" type="text/css" href="cursor.css" />
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <ul>
            <li><a href="#"><i class="fa fa-address-card"></i></a></li>
            <li><a href="#"><i class="fa fa-address-card"></i></a></li>
            <li><a href="#"><i class="fa fa-drivers-license-o"></i></a></li>
            <li><a href="#"><i class="fa fa-envelope-open-o"></i></a></li>
            <li><a href="#"><i class="fa fa-ravelry"></i></a></li>
            <li><a href="#"><i class="fa fa-snowflake-o"></i></a></li>
            <div class="cursor"></div>
        </ul>
        <script>
            const cursor = document.querySelector(".cursor");
            document.addEventListener('mousemove', (e) => {
                cursor.style.left = e.pageX + 'px';
                cursor.style.top = e.pageY + 'px';
            })
        </script>
    </body>
</html>

cursor.css:

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: azure;
}
ul {
    position: relative;
    display: flex;
}
ul li {
    list-style: none;
    margin: 0 30px;
}
ul li a {
    position: relative;
    display: inline-block;
    font-size: 2em;
    color: gray;
    transition: all 0.3s;
}
ul li:hover a {
    color: deepskyblue;
    transform: scale(1.5);
}
.cursor {
    position: fixed;
    width: 0;
    height: 0;
    border: 15px solid gray;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.3s, height 0.3s;
}
ul li:hover~.cursor {
    width: 80px;
    height: 80px;
    border: 3px solid deepskyblue;
}