源案例在线预览
Code & 演示原地址: 链接代码复现(有修改)
CSS
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: url("https://img0.baidu.com/it/u=2090081131,3262806058&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500") no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.wrap {
width: 500px;
height: 150px;
background: rgba(255,255,255,0.2);
border: 1px solid white;
border-radius: 75px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.button {
display: block;
text-decoration: none;
color: #ffffff;
padding: 20px;
border: 2px solid rgb(30, 213, 76);
border-radius: 31px;
transition: background-color .3s linear;
}
.button:hover {
background-color: rgb(30, 213, 76);
}
#overfly {
position: fixed;
background: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
z-index: -1;
}
#overfly:target {
opacity: 1;
z-index: 2;
}
.window {
width: 30%;
background: #ffffff;
margin: 200px auto 0 auto;
border-radius: 5px;
position: relative;
}
.window h1 {
display: inline-block;
padding: 20px;
}
.window p {
padding: 20px;
}
.close {
font-size: 40px;
font-weight: bold;
text-decoration: none;
color: #333;
position: absolute;
top: 18px;
right: 40px;
transition: color .3s;
}
.close:hover {
color: rgb(30, 213, 76);
}
</style>
Html
<body>
<div class="wrap">
<a class="button" href="#overfly">Let me Pop up</a>
</div>
<div id="overfly">
<div class="window">
<h1>Here i am</h1>
<a class="close" href="#">×</a>
<p>Thank to pop me out of that button, but now i'm done so you can close this window.</p>
</div>
</div>
</body>
通过案例学习到的新知识
border-radius属性的取值
- 一般在设定时,习惯用单值赋值的方式。那么完整的赋值格式是什么样的?
完整格式:p1 p2 p3 p4 / p1 p2 p3 p4。 第一部分为水平半径,第二部分为垂直半径。根据书写顺序,一一对应。 - 单值的方式自理解为是这种方式的简写,即4个角的水平、垂直圆半径都为该单值。
- 另一种简便方式: 水平半径/垂直半径。那么四个角都会根据该指定值进行圆化。
a标签配合锚点定位模拟点击事件
通过锚点元素的:target伪类选择器,可以监听a标签是否进行了点击后锚点跳转。
一般需要再搭配一个跳转根锚点 或 其他锚点的a标签,来取消上一步监听锚点跳转时添加的样式。
rgba 函数
使用红( R )、绿( G )、蓝( B )、透明度( Alpha )的叠加来生成各式各样的颜色。