css关闭按钮样式

最新推荐文章于 2023-03-17 16:01:56 发布

辣姐什么鬼

最新推荐文章于 2023-03-17 16:01:56 发布

阅读量7.7k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/79866336

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图：录屏的时候忘了把鼠标录上，效果是鼠标移上放大变红透明度改变_(:3」∠)_懒得录第二遍了，只需要修改定位的right值和top值

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关闭按钮</title>
    <style>
        .aui_close {
            width: 20px;
            height: 20px;
            line-height: 20px;
            display: block;
            position: absolute;
            left:10px;
            top:10px;
            font-family: Helvetica, STHeiti;
            _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino;
            font-size: 18px;
            border-radius: 20px;
            background: #999;
            color: #FFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            -moz-transition: linear .06s;
            -webkit-transition: linear .06s;
            transition: linear .06s;
            padding: 0;
            text-align: center;
            text-decoration: none;
            outline: none;
            cursor: pointer;
        }
        .aui_close:hover {
            width: 24px;
            height: 24px;
            line-height: 24px;
            left:8px;
            top:8px;
            color: #FFF;
            box-shadow: 0 1px 3px rgba(209, 40, 42, .5);
            background: #d1282a;
            border-radius: 24px;
            transition: all 0.2s ease-out;
            opacity: 0.8;
        }
    </style>
</head>
<body>
<a class="aui_close" href="javascript:void(0);">×</a>
</body>
</html>

辣姐什么鬼

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
css关闭按钮样式

效果图：录屏的时候忘了把鼠标录上，效果是鼠标移上放大变红透明度改变_(:3」∠)_懒得录第二遍了，只需要修改定位的right值和top值代码： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;关闭按钮&am
复制链接

扫一扫