利用css实现鼠标悬停效果的方法

发布时间：2020-08-19 11:23:26 阅读：281 作者：小新栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章给大家分享的是有关利用css实现鼠标悬停效果的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

利用css实现鼠标悬停效果的方法

我们先来看下效果：

利用css实现鼠标悬停效果的方法

html代码：

        <div class="box shadow">
            这是是pic-1
            <div class="circle"></div>
        </div>
        <div class="box shadow">
            这是是pic-2
            <div class="circle"></div>
        </div>
        <div class="box shadow">
            这是是pic-3
            <div class="circle"></div>
        </div>

css代码：

<style type="text/css">
html {
    box-sizing: border-box;
    font: 18px PT Mono;
    background: antiquewhite;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

.box {
    width: 25%;
    min-width: 250px;
    display: block;
    height: 50px;
    position: relative;
    border-radius: 5px;
    background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
    margin-bottom: 40px;
    padding: 15px 25px 0 40px;
    color: darkslategray;
    box-shadow: 1px 2px 1px -1px #777;
    transition: background 200ms ease-in-out;
}

.shadow {
    position: relative;
}

.shadow:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 13px;
    right: 7px;
    width: 75%;
    top: 0;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    transition: all 150ms ease-in-out;
}

.box:hover {
    background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}

.shadow:hover::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    bottom: 20px;
    z-index: -10;
}

.circle {
    position: absolute;
    top: 14px;
    left: 15px;
    border-radius: 50%;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
    width: 20px;
    height: 20px;
    display: inline-block;
}

</style>

感谢各位的阅读！关于利用css实现鼠标悬停效果的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

利用css实现鼠标悬停效果的方法

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签