CSS 实现鼠标触碰完成渐变切换

qq_52712971

已于 2023-01-03 23:40:25 修改

阅读量1k

点赞数 3

文章标签： css 前端

于 2023-01-03 23:37:56 首次发布

本文链接：https://blog.csdn.net/qq_52712971/article/details/128540863

版权

CSS 鼠标触碰完成渐变切换

效果图如下：
Alt
首先设置两个一样大小，颜色不同的盒子。粉色的盒子是蓝色盒子的父级盒子，利用子绝父相将蓝色盒子放置在粉色盒子的右侧（利用子绝父相，还可以在父盒子中设置overflow:hidden，让不在父盒子区域内的子盒子隐藏）.当鼠标触碰父盒子区域时，子盒子移动回父盒子所在区域，完成渐变切换。代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: content-box;
        }

        .box1 {
            < !--父盒子设置为相对定位-->
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 200px auto;
            < !--父盒子溢出隐藏-->
            overflow: hidden;
            < !--设置父盒子圆角-->
            border-radius: 50px;
        }

        .bar {
            < !--子盒子设置为绝对定位-->
            position: absolute;
            < !--子盒子先定位到父盒子的右外侧-->
            right: -100px;
            top: 0;
            width: 100px;
            height: 100px;
            < !--设置子盒子圆角-->
            border-radius: 50px;
            background-color: skyblue;
            < !--设置子盒子过渡时的变化属性，过渡时间-->
            transition: all .5s;
        }

        < !--鼠标触碰父盒子时，子盒子完成过渡-->
        .box1:hover .bar {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="bar"></div>
    </div>
</body>

</html>