css毛玻璃样式,毛玻璃风格图标
为什么css毛玻璃效果属性无用
只是用到了css滤镜(filter)中的blur属性。
成都创新互联服务项目包括江口网站建设、江口网站制作、江口网页制作以及江口网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，江口网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到江口省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。
但是要做一个好的毛玻璃效果，需要注意很多细节。
HTML5+CSS3小实例：毛玻璃炫光按钮
HTML5+CSS3做一组毛玻璃炫光按钮，主要用到投影+模糊滤镜+CSS动画，搞定，看效果吧。
效果：
源码：
如何使用CSS打造毛玻璃效果
其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。
1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。
如何用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" /
backdrop-filter实现磨砂玻璃效果
css的backdrop-filter简介：
backdrop-filter可实现毛玻璃(磨砂)的效果，但可能兼容性不好，尤其安卓移动端，
大致效果如下：
绘制简单三角形
如下所示：
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('') 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('') 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
!--[if IE] 请使用非IE浏览器查看 ![endif]--
!--[if gte IE 7] 请使用非IE浏览器查看 ![endif]--
!--[if !IE]!--
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
!--![endif]--
/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
当前标题：css毛玻璃样式,毛玻璃风格图标
本文URL：http://shouzuofang.com/article/dsdipsh.html