X关闭按钮仅使用css
如何在css3中制作十字(X),用作关闭按钮？
我一直在寻找,我找不到如何....当我在网站上查看使用它的源代码时,总会有一些奇怪的东西使我的代码无法使用.
我想要的X按钮:http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
单击图像时,这是右侧的十字形.
我认为如果有人可以发布一个简单的通用css代码来在css3中创建一个简单的X交叉,这将是很好的
谢谢
and*_*one 42
作为关闭或"时间"符号的纯CSS解决方案,您可以将ISO代码与content属性一起使用.我经常使用它:after或:之前的伪选择器.
内容代码是\ 00d7.
例
div:after{
display: inline-block;
content: "\00d7"; /* This will render the 'X' */
}
然后,您可以以任何方式设置和选择伪选择器.希望这有助于某人:).
- 如果有人想要的话，“加号”符号是代码“\002b”。 (5认同)
- 您知道如何在单击角度内容时调用函数吗？假设我想关闭 div..这可能吗？ (2认同)
小智 22
.close-btn {
font-size: 60px;
font-weight: bold;
color: #000;
}<span class="close-btn">×</span>Yup*_*Yup 21
你要找的主要观点是
tag-remove:before {
content: 'x'; // here is your X(cross) sign.
color: #fff;
font-weight: 300;
font-family: Arial, sans-serif;
}
你可以很容易地做到这一点.
编辑:
<!DOCTYPE html>
<html>
<head>
<style>
#mdiv {
width: 25px;
height: 25px;
background-color: red;
border: 1px solid black;
}
.mdiv {
height:25px;
width: 2px;
margin-left: 12px;
background-color: black;
transform: rotate(45deg);
Z-index:1;
}
.md {
height: 25px;
width: 2px;
background-color: black;
transform: rotate(90deg);
Z-index:2;
}
</style>
</head>
<body>
<div id="mdiv">
<div class="mdiv">
<div class="md"></div>
</div>
<div>
</body>
</html>
- 您可以使用×(次符号)代替"X". (9认同)
Zub*_*aif 19
.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}<a href="#" class="close">dav*_*rey 16
这里有几种尺寸和悬停动画的各种各样的.. 演示(链接)
<ul>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
<li>Switch</li>
</ul>
<ul>
<li class="ele">
<div class="x large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop large"><b></b><b></b><b></b><b></b></div>
<div class="x t large"><b></b><b></b><b></b><b></b></div>
<div class="x shift large"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop medium"><b></b><b></b><b></b><b></b></div>
<div class="x t medium"><b></b><b></b><b></b><b></b></div>
<div class="x shift medium"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop small"><b></b><b></b><b></b><b></b></div>
<div class="x t small"><b></b><b></b><b></b><b></b></div>
<div class="x shift small"><b></b><b></b><b></b><b></b></div>
<div class="x small grow"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x switch"><b></b><b></b><b></b><b></b></div>
</li>
</ul>
CSS
.ele div.x {
-webkit-transition-duration:0.5s;
transition-duration:0.5s;
}
.ele div.x.slow {
-webkit-transition-duration:1s;
transition-duration:1s;
}
ul { list-style:none;float:left;display:block;width:100%; }
li { display:inline;width:25%;float:left; }
.ele { width:25%;display:inline; }
.x {
float:left;
position:relative;
margin:0;
padding:0;
overflow:hidden;
background:#CCC;
border-radius:2px;
border:solid 2px #FFF;
transition: all .3s ease-out;
cursor:pointer;
}
.x.large {
width:30px;
height:30px;
}
.x.medium {
width:20px;
height:20px;
}
.x.small {
width:10px;
height:10px;
}
.x.switch {
width:15px;
height:15px;
}
.x.grow {
}
.x.spin:hover{
background:#BB3333;
transform: rotate(180deg);
}
.x.flop:hover{
background:#BB3333;
transform: rotate(90deg);
}
.x.t:hover{
background:#BB3333;
transform: rotate(45deg);
}
.x.shift:hover{
background:#BB3333;
}
.x b{
display:block;
position:absolute;
height:0;
width:0;
padding:0;
margin:0;
}
.x.small b {
border:solid 5px rgba(255,255,255,0);
}
.x.medium b {
border:solid 10px rgba(255,255,255,0);
}
.x.large b {
border:solid 15px rgba(255,255,255,0);
}
.x.switch b {
border:solid 10px rgba(255,255,255,0);
}
.x b:nth-child(1){
border-top-color:#FFF;
top:-2px;
}
.x b:nth-child(2){
border-left-color:#FFF;
left:-2px;
}
.x b:nth-child(3){
border-bottom-color:#FFF;
bottom:-2px;
}
.x b:nth-child(4){
border-right-color:#FFF;
right:-2px;
}
您可以使用svg。
<svg viewPort="0 0 12 12" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="11"
x2="11" y2="1"
stroke="black"
stroke-width="2"/>
<line x1="1" y1="1"
x2="11" y2="11"
stroke="black"
stroke-width="2"/>
</svg>- 确保使用 [`viewBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)，而不是 `viewPort`。这是我目前使用的：`<svg class="close" viewBox="0 0 1 1" height="1" width="1" version="1.1" xmlns="http://www.w3 .org/2000/svg"><line x1="0" y1="1" x2="1" y2="0"stroke="black"stroke-width="0.1" /><line x1="0 " y1="0" x2="1" y2="1"stroke="black"stroke-width="0.1" /></svg>`。 (2认同)
-- 简单的 HTML 解决方案 --
易于调整大小图标的最终结果：
JSfiddle 演示：https ://jsfiddle.net/allenski/yr5gk3cm/
简单的 HTML：
<a href="#" class="close" tabindex="0" role="button">close</a>
笔记：
tabindex属性是为了帮助 iOS 触摸设备的可访问性重点。role属性是让屏幕阅读器用户知道这是一个按钮。- 这个词
close也是供屏幕阅读器提及的。
CSS代码：
.close {
position: absolute;
top: 0;
right: 0;
display: block;
width: 50px;
height: 50px;
font-size: 0;
}
.close:before,
.close:after {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 20px;
background-color: #F0F0F0;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: top left;
content: '';
}
.close:after {
transform: rotate(-45deg) translate(-50%, -50%);
}
要调整关闭 X 图标的粗细，请更改该width属性。更薄的图标示例：
.close:before,
.close:after {
width: 2px;
}
要调整关闭 X 图标的长度，请更改height属性。例子：
.close:before,
.close:after {
height: 33px;
}