本文目录
- css样式兼容各种浏览器的 毛玻璃效果求解
- css制作毛玻璃效果好麻烦 wc3为什么不重视这种效果
- 如何使用CSS打造毛玻璃效果
- css毛玻璃效果怎么添加颜色
- 为什么css毛玻璃效果属性无用
- 如何用css做出毛玻璃效果
- CSS3如何实现磨砂玻璃背景效果
- 请问如何在嵌套的div中写出css的毛玻璃效果
- CSS3怎样实现毛玻璃效果
css样式兼容各种浏览器的 毛玻璃效果求解
-webkit就是针对，webkit核心浏览器的，典型CHROME，Safari-moz是Mozilla核心，典型，火狐-o-, -xv-，典型OPERA-ms，一看就知道是微软了，一般省略你加上其它厂商的标头试试，有部分不支持这属性，
css制作毛玻璃效果好麻烦 wc3为什么不重视这种效果
如果仅仅是模糊的话你用一张图片模糊下不就搞定了，css都不用...css也有blur的，在滤镜里面...然后如果你毛玻璃想手指摸上去的地方变清晰的话，这个不是w3c重视不重视的问题了，属于css语言能力的问题，css本来就不是干这事的。
如何使用CSS打造毛玻璃效果
其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。 1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。
css毛玻璃效果怎么添加颜色
《!DOCTYPE html》《html lang=“en“》《head》 《meta charset=“UTF-8“》 《title》Document《/title》《/head》《style type=“text/css“》 /** * Frosted glass effect */body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 Baskerville, Palatino, serif;}body, main::before { background: url(“http://csssecrets.io/images/tiger.jpg“) 0 / cover fixed;}main { position: relative; margin: 0 auto; padding: 1em; max-width: 23em; background: rgba(255,0,0,.25) border-box; overflow: hidden; border-radius: .3em; box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6); text-shadow: 0 1px 1px hsla(0,0%,100%,.3);}main::before { content: ’’; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: -30px; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px);}blockquote { font-style: italic }blockquote cite { font-style: normal; }《/style》《body》 《main》《blockquote》“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”《/em》《footer》— 《cite》Oscar Wilde, The Picture of Dorian Gray《/cite》《/footer》《/blockquote》《/main》《/body》《/html》
为什么css毛玻璃效果属性无用
只是用到了css滤镜(filter)中的blur属性。CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。但是要做一个好的毛玻璃效果，需要注意很多细节。
如何用css做出毛玻璃效果
CSS代码：.blur { filter: url(’图片路径’); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}HTML代码：《img src=“mm1.jpg“ /》《img src=“mm1.jpg“ class=“blur“ /》
CSS3如何实现磨砂玻璃背景效果
假如页面有一个背景和一个透明的盒子，我们先将盒子范围内的背景截取下来，在透明盒子之后设置一个伪元素用绝对定位格式化长宽让其跟透明盒子一样大小，在将伪元素背景设置为刚刚截取的图片设置模糊、设置z-index让伪元素在透明盒子之后，在给透明盒子设置一点阴影就好了。核心代码如下
请问如何在嵌套的div中写出css的毛玻璃效果
CSS代码：.blur {filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */-webkit-filter: blur(10px); /* Chrome, Opera */-moz-filter: blur(10px); -ms-filter: blur(10px);filter: blur(10px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}HTML代码：《div》《img class=“blur“ /》《/div》
CSS3怎样实现毛玻璃效果
请问楼主是不是想要图片中的效果
下面是我的代码。自己先看看，有不懂再来问我
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-8“》
《meta http-equiv=“X-UA-Compatible“ content=“chrome=1“ /》
《title》《/title》
《style》
* {
transition: all .3s;
}
.fontColor {
color: #333;
}
.fontWhite {
color: #fff;
}
.fontTheme {
color: #00a2e9;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.pointer {
cursor: pointer;
}
.none {
display: none;
}
.hidden {
overflow: hidden;
}
html,
body {
display: inline-block;
width: 100%;
height: 100%;
margin: 0px;
perspective: 500px;
}
.body {
width: 100%;
height: 100%;
background: url(’http://hitopdl.hicloud.com/dl/hitopdl//hitop/wallpaper/FHD/38968/small_38968.jpg’) no-repeat center center;
background-size: 100% auto;
background-attachment: fixed;
}
.loginBox {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
box-sizing: border-box;
width: 600px;
height: 300px;
border: 3px solid rgba(130, 130, 130, .3);
border-radius: 3px;
overflow: hidden;
animation: rotate-X 1s;
animation-fill-mode: forwards;
transform: rotateX(90deg) translateZ(0px);
transform-origin: bottom;
animation-delay: .8s;
}
.loginBox:hover {
border: 3px solid rgba(255, 255, 255, .26);
}
.loginBox:hover .loginBg {
filter: blur(0px);
}
.loginBg {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: url(’http://hitopdl.hicloud.com/dl/hitopdl//hitop/wallpaper/FHD/38968/small_38968.jpg’) no-repeat center center;
background-attachment: fixed;
}
.loginName {
text-align: left;
text-indent: 1em;
font: normal normal normal 20px/34px “黑体“, “微软雅黑“;
width: 100%;
background-color: rgba(0, 0, 0, .38);
border-bottom: 1px solid rgba(255, 255, 255, .42);
}
.close {
right: 4px;
bottom: 4px;
font: normal normal normal 14px/14px monaco, “黑体“, “微软雅黑“;
}
.loginInput {
width: 340px;
height: auto;
margin: 50px auto 0px auto;
overflow: hidden;
perspective-origin: bottom;
transform-style: preserve-3d;
}
.name,
.password {
color: #fff;
text-indent: 1em;
font: normal normal normal 14px/20px “黑体“, “微软雅黑“;
text-align: left;
display: block;
vertical-align: ;
margin: 10px auto;
width: 340px;
line-height: 32px;
height: 32px;
outline: none;
background-color: rgba(0, 0, 0, .1);
border: none;
border-bottom: 1px solid #fff;
transition: all 1s;
border-radius: 2px;
}
.name:focus,
.password:focus {
background-color: rgba(0, 0, 0, .5);
border-bottom: 1px solid rgba(255, 255, 255, .4);
}
::-webkit-input-placeholder {
text-indent: 1em;
text-align: left;
color: rgba(255, 255, 255, .8);
font: normal normal normal 14px/20px “黑体“, “微软雅黑“;
}
.landing,
.returnPsd {
margin-top: 4px;
background-color: #00a2e9;
font: normal normal normal 16px/22px “黑体“, “微软雅黑“;
padding: 9px 22px;
border-radius: 3px;
cursor: pointer;
}
.landing {
float: left;
margin-left: 10px;
}
.returnPsd {
float: right;
margin-right: 10px;
}
.blur4 {
filter: blur(4px);
-ms-filter: blur(4px);
-moz-filter: blur(4px);
-webkit-filter: blur(4px);
}
.msg {
font-family: “黑体“;
z-index: 10;
left: 50%;
top: 20%;
margin-left: -60px;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, .1);
text-align: center;
width: 120px;
line-height: 80px;
opacity: 0;
animation: spring-X 2s linear;
animation-fill-mode: forwards;
}
@keyframes rotate-X {
0% {
transform: translateZ(0px) rotateX(90deg);
}
10% {
transform: translateZ(-50px) rotateX(90deg);
transform:
}
40% {
transform: translateZ(200px);
}
45% {
rotateX(90deg);
}
100% {
transform: translateZ(0px) rotateX(0deg);
}
}
@keyframes spring-X {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
10% {
opacity: 1;
transform: scale(1, 1);
}
15% {
opacity: 1;
transform: scale(1.4, 1);
}
20% {
opacity: 1;
transform: scale(0.9, 1);
}
25% {
opacity: 1;
transform: scale(1.2, 1);
}
30% {
opacity: 1;
transform: scale(0.9, 1);
}
33% {
opacity: 1;
transform: scale(1, 1);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
《/style》
《/head》
《body》
《!----》
《!----》
《!--》《!--》
《div class=“msg absolute none fontWhite“》
登陆成功
《/div》
《div class=“body“》
《div class=“loginBox hidden“》
《div class=“loginBg blur4“》《/div》
《div class=“loginName fontWhite relative“》登陆系统 《span class=“close absolute pointer“》Close《/span》《/div》
《div class=“loginInput relative“》
《input class=“name “ type=“text“ placeholder=“请输入你的用户名“ /》
《input class=“password “ type=“password“ placeholder=“请输入你的密码“ /》
《div class=“landing fontWhite“》立即登陆《/div》
《div class=“returnPsd fontWhite“》忘记密码《/div》
《/div》
《/div》
《/div》
《!--《!--》
《/body》
《/html》
《script》
window.onload = function() {
document.querySelector(“.landing“).onclick = function() {
document.querySelector(“.msg“).classList.remove(“none“);
document.querySelector(“.msg“).addEventListener(’animationend’, function() {
document.querySelector(“.msg“).classList.add(“none“);
})
}
}
《/script》
