技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS关闭按钮图标(X)

作者:admin    时间:2021-8-13 9:14:41    浏览:

关闭图标不用小图片,只用CSS,就能轻松实现。本文将给大家介绍如何用CSS来实现一个关闭按钮图标(X),代码其实非常简单。

CSS关闭按钮图标(X)
CSS关闭按钮图标(X)

实例介绍

关闭按钮图标(X)位于区域右上角。

使用了一个鼠标悬停效果,默认颜色透明度为0.3,当鼠标移上去后,透明度为1。

完整HTML代码

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  
  <title>Pure CSS Cross/Close Icon, </title>
  
  
<style>

.close {
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  float: right;
  position: relative;
  right: 20px;
  top: 5px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

.container {
  width: 500px;
  height: 200px;
  margin:30px 20px;
  background-color: #f1f1f1;
}

</style>

 
</head>

<body translate="no" >

<div class="container">
  <a href="#" class="close">
</div>
 
</body>

</html>
 

execcodegetcode

代码解释

按钮颜色、大小、位置均可通过CSS修改,非常方便。

.close:before, .close:after {
  float: right;
  position: relative;
  right: 20px;
  top: 5px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #333;
}

HTML中,class="container"div 是关闭按钮(X)的相对区域。

实例中并无加入点击按钮的事件,实例主要给大家呈现如何用纯CSS来实现一个关闭按钮图标(X)。

您可能对以下文章也感兴趣

标签: 关闭图标  关闭按钮  
相关文章
    x
    • 站长推荐
    /* 左侧显示文章内容目录 */