1:效果图如下:
2:
filter 定义了元素(通常是)的可视效果
blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
background: rgb(1, 4, 8);
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
padding-top: 79px;
/* overflow: hidden; */
position: absolute;
width: 100%;
height: 100%;
margin-bottom: 28rem;
}
.wrapper_ul>li {
float: left;
list-style: none;
width: 20%;
height: 5rem;
text-align: center;
}
.wrapper_ul>li>img {
width: 100%;
height: 100%;
background-size: 100% 100%;
-webkit-filter: blur(5px);
filter: blur(3px);
}
.button {
cursor: url("https://assets.codepen.io/2243770/periwinkle40.png"), auto;
}
.button {
position: relative;
border: none;
width: 100%;
height: 74px;
background-size: 100px 100px;
}
.topL {
background: url("./img/one.jpg");
background-size: 100px 100px;
background-size: 100% 100%;
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(3px);
}
.topM {
background: url("./img/two.jpg");
background-size: 100px 100px;
background-size: 100% 100%;
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(3px);
}
.topR {
background: url("./img/there.jpg");
background-size: 100px 100px;
background-size: 100% 100%;
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(3px);
}
.topT {
background: url("./img/t.jpg");
background-size: 100px 100px;
background-size: 100% 100%;
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(3px);
}
.topB {
background: url("./img/b.jpg");
background-size: 100px 100px;
background-size: 100% 100%;
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(3px);
}
.midL {
background