美文网首页
CSS实现关闭按钮

CSS实现关闭按钮

作者: 8d2855a6c5d0 | 来源:发表于2017-10-23 11:30 被阅读0次
.close {
    position: absolute;
    right: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
    background: silver;
    border-radius: 25px;
    box-shadow: 2px 2px 5px 0px black;
    cursor: pointer;
}

.close:hover {
    background: red;
}
.close:before {
    position: absolute;
    content: '';
    width: 30px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    top: 20px;
    left: 10px;
}
.close:after{
    content: '';
        position: absolute;
    width: 30px;
    height: 10px;
    background: white;
    transform: rotate(-45deg);
    top: 20px;
    left: 10px;
}

效果图

相关文章

  • CSS实现关闭按钮

    效果图

  • 触发 / 关闭浮层

    实现功能:点击按钮触发浮层,点击别处关闭浮层。 html 代码: 部分 css 代码: 1. 方案一 --- 用 ...

  • 使用 css 滤镜转换图片颜色

    【css学习】色调旋转滤镜实现按钮颜色设置 CSS filter:hue-rotate css代码 html

  • 纯CSS实现点击弹出关闭遮罩层

    预览地址:纯CSS实现点击弹出关闭遮罩层 利用纯css实现可点击弹出以及关闭的登录框,同时也包含一个全屏的遮罩层,...

  • button特效 水波效果(vue+js控制)

    原文地址:CSS实现按钮点击的水波纹特效 代码:

  • vue 子组件改变父组件传来的参数

    需求:点击父组件上的一个按钮,弹出一个子组件弹窗,子组件上面有一个关闭按钮,点击关闭按钮子组件隐藏;实现:在子页面...

  • 轻项目 范例代码汇总

    (一)css常见样式1 代码 实现如下效果: 【参考】 实现如下按钮效果: 【参考】 实现如下表格:【参考】 实现...

  • CSS 按钮

    CSS 按钮 本章节我们为大家介绍使用 CSS 来制作按钮。 基本按钮样式 CSS 实例 尝试一下 » 按钮颜色 ...

  • css相关收集

    1.垂直居中2.几种常见的CSS布局3.CSS实现一个粒子动效的按钮4.我写CSS的常用套路(附demo的效果实现...

  • 点击按钮关闭窗口

    监听按钮时间关闭窗口 //点击按钮关闭窗口 frame.dispatchEvent(new WindowEvent...

网友评论

      本文标题:CSS实现关闭按钮

      本文链接:https://www.haomeiwen.com/subject/rcnouxtx.html