ios开发 html 字体模糊效果,CSS前端类似ios毛玻璃效果

/p>

div,

ul,

li {

padding: 0;

margin: 0;

}

body,

#a2::before {

background: url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/01/134017koodqodj306z86z3.jpg”) no-repeat fixed;

background-size: cover;

}

#a2 {

width: 80px;

height: 80px;

border-radius: 20px 20px;

position: relative;

top: 20px;

right: 0;

bottom: 0;

left: 20px;

background: rgba(255, 255, 255, .5);

overflow: hidden;

cursor: pointer;

}

#a2::before {

content: ”;

position: absolute;

top: ;

right: 0;

bottom: 0;

left: 0;

-webkit-filter: blur(10px);

-moz-filter: blur(10px);

filter: blur(10px);

z-index: -1;

margin: -30px;

}

h1 {

position: absolute;

/*这行代码是配合全屏模糊使用的*/

top: 0;

right: 0;

bottom: 0;

left: 0;

/*这行代码是配合全屏模糊使用的*/

font-family: “明黑”;

font-size: 50px;

text-align: center;

display: none;

}

#aa {

width: 200px;

height: 200px;

background: ;

}

#bb {

width: 80px;

height: 20px;

margin-top: 20px;

margin-left: 20px;

font-size: 10px;

font-family: “黑体”;

text-align: center;

line-height: 20px;

}

/*blur的作用是给整个网页加高斯模糊*/

#blur {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

-webkit-filter: blur(10px);

-moz-filter: blur(10px);

filter: blur(10px);

background: url(“

background-size: cover;

display: none;

}

毛玻璃效果

毛玻璃效果

window.onload = function () {

var a2 = document.getElementById(“a2”);

var bb = document.getElementById(“bb”);

var h1 = document.getElementById(“h1”);

var blur = document.getElementById(“blur”);

var clicked = true;

a2.onclick = function () {

if (clicked) {

a2.style.transition = “all 0.5s ease”;

a2.style.width = “400px”;

a2.style.height = “400px”;

a2.style.borderRadius = “40px 40px “;

a2.style.position = “absolute”;

a2.style.top = “0”;

a2.style.right = “0”;

a2.style.bottom = “0”;

a2.style.left = “0”;

a2.style.margin = “auto”;

bb.style.display = “none”;

h1.style.display = “block”;

blur.style.display = “block”;

//上面这行代码是配合全屏模糊使用的

}

else {

a2.style.transition = “all 0.5s ease”;

a2.style.width = “80px”;

a2.style.height = “80px”;

a2.style.position = “relative”;

a2.style.marginTop = “20px”;

a2.style.marginLeft = “20px”;

a2.style.background = “rgba(255,255,255,.5)”;

a2.style.borderRadius = “20px 20px”;

bb.style.display = “block”;

h1.style.display = “none”;

blur.style.display = “none”;

//上面这行代码是配合全屏模糊使用的

}

clicked = !clicked;

}

}