huanggr
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> |
7