纯CSS鼠标hover实现背景动画效果

最新推荐文章于 2024-04-24 00:31:09 发布

Mr.王征

最新推荐文章于 2024-04-24 00:31:09 发布

阅读量2.7k

点赞数 6

分类专栏： CSS 文章标签：鼠标移入背景效果

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88102310

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯CSS鼠标hover实现背景扇动效果</title>
    <style>
        .la-btn {
            padding:14px 20px;
            background:#1abc9c;
            color:#fff;
            font-size:14px;
            overflow:hidden;
            transition:all .35s;
            display:inline-block;
            position:relative;
            z-index:1;
        }
        .la-btn:hover {
            color:#fff;
            background:none;
        }
        .la-btn:before {
            visibility:hidden;
            content:"";
            position:absolute;
            left:50%;
            top:0;
            width:0;
            height:100%;
            background:#2a2b2c;
            z-index:-1;
            transform:skew(45deg,0);
            transition:all .35s;
        }
        .la-btn:hover:before {
            visibility:visible;
            width:150%;
            left:-25%;
        }
        .la-session-more {
            text-align:center;
            margin-top:30px;
        }
        .la-session-more a {
            width:229px;
            height:44px;
            border:1px solid #dbdbdb;
            padding:0;
            background:none;
            text-align:center;
            color:#212121;
            line-height:44px;
            margin:0 15px;
            text-decoration:none;
        }
        .la-session-more a:hover {
            border-color:#2a2b2c;
            background:none;
        }
    </style>
</head>
<body>
<div class="la-session-more"><a href="#" class="la-btn">老        王</a></div>

</body>
</html>

Mr.王征

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
纯CSS鼠标hover实现背景动画效果

效果展示：源码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯CSS鼠标hover实现背景扇动效果&lt;/title&gt; &lt;style&gt; .la-btn {
复制链接

扫一扫