99行代码熟练CSS3高效代码
dome直接拉走看
重点几个CSS3属性注释标的很清
熟练运用这几个属性可以做各种层次界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
*{
padding: 0;
margin: 0;
text-decoration: none;
}
body{
background-color: #272727;
}
.container{
/*vw、vh相对像素，相对于浏览器百分比*/
width: 100vw;
height: 100vh;
/*CSS3flex弹性定位*/
display: flex;
align-items: center;
justify-content: center;
}
.btn{
display: block;
width: 150px;
height: 60px;
border-radius: 10px;
background: #f0f0f0;
font: bold 26px/60px "微软雅黑";
text-align: center;
color: #242424;
transition: 0.3s ease-in-out;
}
.btn:hover{
text-shadow: 0 0 2px #000;
box-shadow: 0 0 10px #fff;
}
.inner{
width: 100vw;
height: 100vh;
background: #f25;
/*CSS3flex弹性定位*/
display: flex;
align-items: center;
justify-content: center;
/*增加层，透明为0隐藏最上层*/
position: absolute;
z-index: 2;
opacity: 0;
/*隐藏box*/
overflow: hidden;
/*元素不可见，但元素仍然占空间*/
visibility: hidden;
/*过渡效果*/
transition: 0.6s ease-in-out;
}
.box{
background: lightblue;
border-radius: 10px;
width: 60%;
height: 80%;
max-width: 800px;
max-height: 600px;
/*CSS3flex弹性定位*/
display: flex;
align-items: center;
justify-content: center;
/*隐藏box，vw、vh相对像素，相对于浏览器百分比*/
position: relative;
bottom: -100vw;
right: -100vh;
/*倾斜效果加过渡*/
transform: rotate(60deg);
transition: 0.6s ease-in-out;
}
/*:target，选取当前活动元素（不懂修改代码看效果or自行查文档）*/
.inner:target{
opacity: 1;
visibility: visible;
}
.inner:target .box{
bottom: 0;
right: 0;
transform: rotate(0);
}
</style>
<body>
<!-- 对于锚点、id注意与css中:target进行联系 -->
<div class="container">
<a class="btn" href="#inner">OPEN</a>
<div class="inner" id="inner">
<div class="box">
<a class="btn" href="#">CLOSE</a>
</div>
</div>
</div>
</body>
</html>
每天一个小技巧，真好。