本文详细介绍了一种使用CSS实现复杂页面布局的方法，通过精确控制元素的位置和尺寸，展示了一个具有动态效果的网页设计案例。该布局利用了绝对定位、背景颜色及模糊效果等特性，为用户提供独特的视觉体验。
CSS
语言：
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css?family=Overpass');
.left-side {
position: absolute;
height: 100vh;
width: 100vw;
background: #000;
overflow: hidden;
z-index: 3;
}
.right-side {
position: absolute;
height: 100vh;
width: 100vw;
background: #000;
z-index: 3;
overflow: hidden;
}
.hover {
position: absolute;
float: left;
height: 70px;
width: 70px;
cursor: none;
overflow: hidden;
}
.bit-top {
position: absolute;
left: 0%;
top: 0%;
height: 5px;
width: 10px;
background: #fff;
}
.bit-top-left {
position: absolute;
left: 0%;
top: 5px;
height: 5px;
width: 5px;
background: #fff;
}
.bit-top-right {
position: absolute;
right: 0%;
top: 0%;
height: 5px;
width: 10px;
background: #fff;
}
.bit-top-right-2 {
position: absolute;
right: 0%;
top: 0px;
height: 10px;
width: 5px;
background: #fff;
}
.bit-bottom-left {
position: absolute;
bottom: 0%;
left: 0px;
height: 10px;
width: 5px;
background: #fff;
}
.bit-bottom-left-2 {
position: absolute;
bottom: 0%;
left: 0px;
height: 5px;
width: 10px;
background: #fff;
}
.bit-bottom-right {
position: absolute;
bottom: 0%;
right: 0px;
height: 5px;
width: 10px;
background: #fff;
}
.bit-bottom-right-2 {
position: absolute;
bottom: 0%;
right: 0px;
height: 10px;
width: 5px;
background: #fff;
}
.blur {
position: absolute;
color: #fefefe;
font-family: 'Overpass', sans-serif;
font-size: 64px;
letter-spacing: 20px;
margin: auto;
width: 100%;
filter: blur(5px);
cursor: none;
overflow: hidden;
text-align: center;
z-index: 3;
}
.focus {
position: absolute;
color: #fefefe;
font-family: 'Overpass', sans-serif;
font-size: 64px;
letter-spacing: 20px;
margin: auto;
width: 100%;
filter: blur(0px);
cursor: none;
overflow: hidden;
text-align: center;
z-index: 2;
}
.container {
position: absolute;
height: 80vh;
padding-top: 20vh;
width: 100%;
overflow: hidden;
}
body {
background: #000;
margin: 0;
padding: 0;
cursor: none;
}
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
