target在英语中代码的是目标的意思,在css中代表的是目标对象的意思,他的作用就是:
URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
当我们知道它的这些属性之后,就可以用来做一些事情了,例如做一个可以点击弹出和关闭的弹出框,详细代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用target模仿js中的点击弹出隐藏效果-国瑞前端</title>
<style type="text/css">
body,html{
width: 100%;height: 100%;
}
* {
padding: 0;margin: 0;
box-sizing: border-box;
transition: all ease-out .4s;
text-decoration: none;
}
a.btn {
position: relative;z-index: 6;
display: block;
width: 100px; height: 46px;
text-align: center; line-height: 46px;
margin: auto;
background: #333;
border-radius: 6px;
color: #fff;
}
.wrap {
position: relative;
top: -46px;
width: 100%;height: 100%;
background: rgba(0, 0, 0, .5);
}
.box {
position: absolute;
top: 50%;left: 50%;
width: 400px;
margin-left: -200px;margin-top: -200px;
text-align: left;
overflow: hidden;
border-radius: 10px;
}
.box h1 {
padding: 30px;
background-color:#1ED34E ;
color: #eee;
}
.box p {
padding: 10px 30px;
background: #ddd;
}
.box h3 {
padding: 20px 30px;
background-color:#1ED34E ;
color: #ccc;
}
.box a {
position: absolute;
top: 8%; right: 5%;
display: block;
width: 30px; height: 30px;
background: #eee;
color: #111;
border-radius: 50%;
text-align: center;line-height: 30px;
}
.box a:hover {
transform: rotate(360deg);
background: #333;
color: #eee;
}
#wrap {
opacity: 0;
/* width: 0; */
/* height: 0; */
}
#wrap:target {z-index: 66; /* 处理层次关系 */
opacity: 1;
/* width: 100%; */
/* height: 100%; */
}
#wrap .box{
left: -50%;
/* width: 100%; */
/* height: 100%; */
}
#wrap:target .box{
left: 50%;
/* width: 100%; */
/* height: 100%; */
}
</style>
</head>
<body>
<a href="#wrap" class="btn">Open Box</a>
<div class="wrap" id="wrap">
<div class="box">
<h1>Hello</h1>
<p>Some Text</p>
<p>Some Text</p>
<h3>Box Footer</h3>
<a href="#">X</a>
</div>
</div>
</body>
</html> |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"使用css中的target属性制作弹出框"
最新评论