`

CSS3实现关闭按钮

csshtml 
阅读更多 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 <style>
  .close {
    /* still bad on picking color */
   /* background: orange; */
   background-image: URL(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160821486.png);
   background-position: center;
   background-repeat: no-repeat;

    color: red;
    /* make a round button */
    border-radius: 12px;
    /* center text */
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
}
/* use cross as close button */
.close::before {
   /* content: "\2716";*/
}
/* place the button on top-right */
.close {
    top: -10px;
    right: -10px;
    position: absolute;
}

.close:hover{
/*background:#000000;*/
 background-image: URL(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160817678.png);
}  
</style>
 </head>
 <body>
            <div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
    <span class="close"></span>
</div>
 </body>
</html>

[img][/img]
  • 大小: 1.5 KB
  • 大小: 1.4 KB
分享到：
| java 生成缩略图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS3实现关闭按钮 6组自定义按钮样式

    今天要分享一款纯CSS3实现的关闭按钮，看上去这些关闭按钮很单调，但是仔细一看你会发现，居然一共有6组不同的样式，如果你想在一个网页窗口中添加一个自定义关闭按钮，那么就可以参考这个CSS3应用。

    CSS3带关闭按钮登录窗口代码

    8. **JavaScript交互**：虽然题目主要关注CSS3，但实现关闭按钮的功能通常需要JavaScript配合。通过监听事件（如`click`），可以实现点击关闭按钮时隐藏登录窗口的效果。 压缩包中的文件结构可能如下： - `index....

    JS+CSS实现带关闭按钮的DIV弹出窗口

    JS+CSS实现带关闭按钮的DIV弹出窗口

    HTML5+CSS3实现内置功能按钮提示框带有关闭小图标

    这个组件不仅具有基本的提示信息功能，还具备了关闭按钮和可自定义的内置功能按钮，如“确定”和“取消”，为用户提供更好的交互体验。 首先，我们来看看HTML5在这个项目中的应用。HTML5引入了许多新的元素和API，...

    CSS3实现开关按钮，像电灯开关.rar

    4种CSS3实现的开关按钮，像电灯开关一样的按钮，点击后打开开关，按钮上的灯会亮，再点击就关闭了按钮，用传统CSS实现的话，估计需要调用图片来修饰开关效果。本HTML5演示了按钮式、推拉式、上翘式、触摸式四种风格...

    JS+CSS实现带关闭按钮DIV弹出窗口的方法.docx

    本文将详细介绍如何使用JavaScript（JS）和层叠样式表（CSS）来实现一个带关闭按钮的DIV弹出窗口。 首先，我们需要理解HTML结构。在提供的代码中，有两个主要的`div`元素：`#ly`和`#Layer2`。`#ly`是用来创建一个半...

    CSS3实现的多组关闭按钮点击动画特效源码.zip

    CSS3实现的多组关闭按钮点击动画特效源码是一段实现了13种关闭按钮点击动画效果，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。

    css3-实现3d菜单按钮效果

    在本文中，我们将深入探讨如何使用CSS3来创建引人注目的3D菜单按钮效果。CSS3是 Cascading Style Sheets（层叠样式表）的第三个主要版本，它引入了许多强大的新特性，包括3D转换，这使得我们能够在网页设计中实现...

    纯CSS3实现动画开关按钮特效.zip

    纯CSS3实现的动画开关按钮特效是一种常见的交互设计元素，常用于后台管理系统或者用户界面，以提供简洁且直观的操作方式。这种特效通过CSS3的属性和功能，无需JavaScript即可实现动态效果，使得开关按钮在被点击时...

    css3 iphone开关按钮.zip

    综上所述，这个“css3 iphone开关按钮”项目展示了如何利用CSS3的新特性来创建一款互动性强、视觉效果出色的UI元素，同时强调了纯CSS实现的潜力和价值。无论是对于前端开发者还是网页设计师，理解和掌握这些技术都将...

    div+css弹出层带关闭按钮

    以上就是关于"div+css弹出层带关闭按钮"的基本知识和实现方法，这个技术在现代网页开发中非常常见，能够提升用户体验并为用户提供更多信息交互的方式。理解并熟练掌握这些概念和技巧对于前端开发者来说至关重要。

    纯css3带动画效果的左右滑动按钮

    【纯css3带动画效果的左右滑动按钮】是一种利用CSS3特性实现的交互式设计，主要用于创建具有平滑动画和视觉吸引...同时，这种纯CSS实现的滑动按钮也意味着更少的代码和更快的加载速度，对于优化网页性能具有积极意义。

    css+errors关闭按钮动画

    这个“css+errors关闭按钮动画”项目，很显然，是关于如何利用CSS3技术来实现一个带有错误提示功能的关闭按钮，并且该按钮在点击时会有吸引人的动画效果。我们将探讨几个关键的CSS3特性，包括伪类、过渡效果、变换...

    JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:&lt;html&gt; &lt;head&gt; &lt;title&gt;JS+CSS实现带关闭按钮的DIV弹出窗口&lt;/title&gt; [removed]...

    jQuery+CSS实现图片放大浮动层带关闭按钮

    "jQuery+CSS实现图片放大浮动层带关闭按钮"是一种常见的技术手段，用于提升用户查看图片的体验。这种方法可以使用户点击小图后，图片在一个浮层中以放大的形式显示，并提供一个关闭按钮以便用户随时关闭这个浮层。...

    css3 UI开关按钮特效.zip

    在网页设计中，CSS3（层叠样式表第三版）是一种强大的样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML...同时，这种纯CSS实现的特效也适用于那些对JavaScript支持有限或者希望减少JavaScript使用的项目。

    css3 3D邮寄信封打开动画特效

    "css3 3D邮寄信封打开动画特效"是利用CSS3的3D转换和动画特性来模拟信封从关闭到打开的过程，为用户创造一种视觉上的惊喜。这种特效常见于网站的登陆页面、通知提示或者创意展示中，可以增强用户的浏览体验。 1. **...

    纯css3各种开关按钮动画特效

    本篇将详细介绍如何利用纯CSS3技术实现四种独特的开关按钮动画特效，包括按压式按钮、上下拨动按钮、滑动按钮和电源开关按钮。 ### 1. 按压式按钮 按压式按钮是一种模拟物理按钮被按下时产生的凹陷效果。通过CSS3...

Magicbox
Global site tag (gtag.js) - Google Analytics