html hover鼠标悬停动画

最新推荐文章于 2025-06-01 09:59:50 发布

Xheng1934

最新推荐文章于 2025-06-01 09:59:50 发布

阅读量969

点赞数 5

CC 4.0 BY-SA版权

分类专栏：网页文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/m0_74253823/article/details/137179283

网页专栏收录该内容

5 篇文章

订阅专栏

button hover effect，鼠标悬停到button上产生动画效果。（无click点击）

给出三个界面，第一个hover后方块从无到有淡出。

第二个hover后方块从小方块到大方块瞬变。

第三个hover后方块从小方块到大方块渐变。

第二个和第三个看起来差不多，第三个渐变用了css的transition。都是隐藏小框后显示大框，不过第三个大框原始width和height是0，transition到50px。

第一个：

<!--第一个hover后方块从无到有淡出-->
<!DOCTYPE html>
<html>
<head>
    <title>Button Hover Effect</title>
    <style>
        #newBox {
            display: none;/* 初始状态下，新小框隐藏 */
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
        }
</style>
</head>
<body>
    <button id="hoverButton">Hover over me</button>
    <div id="newBox"></div>

    <script>
        const button = document.getElementById('hoverButton');
        const newBox = document.getElementById('newBox');

        button.addEventListener('mouseover', () => {
            // 当鼠标悬停在按钮上时，显示新小框并缓慢出现
            newBox.style.display = 'block';
            newBox.style.opacity = 0;
            let opacity = 0;
            const interval = setInterval(() => {
                if (opacity < 1) {
                    opacity += 0.1;
                    newBox.style.opacity = opacity;
                } else {
                    clearInterval(interval);
                }
            }, 50); // 50ms 为一个渐变步骤的时间间隔
        });

        button.addEventListener('mouseout', () => {
            // 当鼠标移出按钮时，隐藏新小框
            newBox.style.display = 'none';
        });
</script>
</body>
</html>

第二个：

<!--第二个hover后方块从小方块到大方块瞬变-->
<!DOCTYPE html>
<html>
<head>
    <title>Button Hover Effect</title>
    <style>
        #hoverButton {
            position: relative;
        }

        /* 迷你版小框 */
        #miniBox {
            width: 50px; /* 初始宽度 */
            height: 50px; /* 初始高度 */
            background-color: lightblue;
            position: absolute;
        }

        /* 鼠标悬停时的大框 */
        #hoverButton:hover + #newBox {
            width: 100px; /* 变大后的宽度 */
            height: 100px; /* 变大后的高度 */
        }

        /* 变大后的小框 */
        #newBox {
            display: none; /* 初始状态下隐藏 */
            width: 0;
            height: 0;
            background-color: lightblue;
            position: absolute;
            transition: width 0.5s, height 0.5s; /* 缓慢变化 */
        }
</style>
</head>
<body>
    <button id="hoverButton">Hover over me</button>
    <div id="miniBox"></div>
    <div id="newBox"></div>

    <script>
        const button = document.getElementById('hoverButton');
        const newBox = document.getElementById('newBox');

        button.addEventListener('mouseover', () => {
            // 当鼠标悬停在按钮上时，显示新小框并缓慢放大
            newBox.style.display = 'block';
            newBox.style.width = '100px';
            newBox.style.height = '100px';
        });

        button.addEventListener('mouseout', () => {
            // 当鼠标移出按钮时，隐藏新小框
            newBox.style.display = 'none';
        });
</script>
</body>
</html>

第三个：

<!--第三个hover后方块从小方块到大方块渐变-->
<!DOCTYPE html>
<html>
<head>
    <title>Button Hover Effect</title>
    <style>
        #hoverButton {
            position: relative;
        }

        /* 初始状态下，新小框隐藏 */
        #miniBox {
            width: 50px; /* 迷你版的宽度 */
            height: 50px; /* 迷你版的高度 */
            background-color: lightblue;
            position: absolute;
        }
        
        /* 变大后的小框 */
        #newBox {
            display: none; /* 初始状态下隐藏 */
            width: 50px; /* 初始宽度和迷你版一致 */
            height: 50px; /* 初始高度和迷你版一致 */
            background-color: lightblue;
            position: absolute;
            transition: width 0.5s, height 0.5s; /* 宽度和高度的变化采用0.5秒的过渡效果 */
        }
</style>
</head>
<body>
    <button id="hoverButton">Hover over me</button>
    <div id="miniBox"></div>
    <div id="newBox"></div>

    <script>
        const button = document.getElementById('hoverButton');
        const newBox = document.getElementById('newBox');
        const minibox = document.getElementById('miniBox');

        button.addEventListener('mouseover', () => {
            // 当鼠标悬停在按钮上时，显示新小框并缓慢放大
            newBox.style.display = 'block';
            minibox.style.display = 'none';
            setTimeout(() => {
                newBox.style.width = '100px';
                newBox.style.height = '100px';
            }, 10); // 延迟一小段时间后再改变大小，以便过渡效果生效
        });

        button.addEventListener('mouseout', () => {
            minibox.style.display = 'block';
            // 当鼠标移出按钮时，缓慢减小新小框的大小并隐藏
            newBox.style.width = '50px';
            newBox.style.height = '50px';
            setTimeout(() => {
                newBox.style.display = 'none';
            }, 500); // 过渡效果持续0.5秒
        });
</script>
</body>
</html>