毛玻璃效果（摘抄练习）

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/css案例/毛玻璃效果/毛玻璃.css"><title>Document</title>
</head>
<body><!-- 效果一 --><div class="box one"><span></span><span></span></div><!-- 效果二 --><div class="box two"><span></span><span></span></div>
</body>
</html>

css代码

* {padding: 0;margin: 0;list-style: none;box-sizing: border-box;
}
/* body {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
} */
.box.one{position: relative;width: 150px;height: 150px;/* background: #000; */margin:  50px auto;
}
/*效果一： 毛玻璃 */
.box.one span:nth-child(1){display: block;position: absolute;top: 0;left: 0;width: 100px;height: 100px;border-radius: 50%;background: rgb(4, 0, 255,0.1);backdrop-filter: blur(5px);border: 1px solid rgba(128, 128, 128, 0.2);z-index: 1;animation:boxone ease-in-out 2s infinite;}
/* 效果一：黑面面片 */
.box.one span:nth-child(2){position: absolute;top: 0;left: 0;width: 100px;height: 100px;border-radius: 50%;background: #000;animation:boxone ease-in-out 2s infinite;animation-delay: -1s;    }
/* 效果一：阴影 */
.box.one span::after{position: absolute;top: 110px;left: 10px;content: "";width: 80px;height: 10px;background: radial-gradient(rgb(59, 59, 59,0.1),transparent,transparent);border-radius: 50%;
}
@keyframes boxone {0%,100%{transform: translateX(50px);}50%{transform: translateX(-50px);}
}
/* 效果二：类似 */
/* -------------------------------- */
.box.two{position: relative;width: 150px;height: 150px;/* background: #000; */margin:  25px auto;
}.box.two span:nth-child(1){position: absolute;top: 0px;left: 0px;width: 100px;height: 100px;border-radius: 50%;background: rgb(4, 0, 255,0.1);/* 毛玻璃关键，添加这个属性，当元素叠加时，底下的元素会出现模糊效果，模拟毛玻璃 */backdrop-filter: blur(5px);border: 1px solid rgba(128, 128, 128, 0.2);z-index: 1;
}
.box.two span:nth-child(2){position: absolute;top: -10px;left: -10px;width: 120px;height: 120px;border-radius: 50%;/* background: green; *//* 此处作用，自身元素为遮罩，且无背景色，这样额可以通过移动伪元素显示4分之一圆形 */overflow: hidden;/* fu'yuan's */animation: ro linear 2s infinite;
}
.box.two span:nth-child(2)::after{content: "";position: absolute;top: -60px;left: -60px;width: 120px;height: 120px;background: red;/* border-radius: 50%; */}
@keyframes ro {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}

毛玻璃效果（摘抄练习）相关推荐

css毛玻璃效果白边_CSS3毛玻璃效果(blur)有白边问题的解决方法
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
IOS8的新特性：简洁易用的毛玻璃效果
探寻IOS8的新亮点:毛玻璃效果的简易实现 IOS8之前,apple官方并不建议开发者使用类似毛玻璃的模糊效果,也并没有开放相关的接口,大部分的开发者是通过转化CGImage这个类来实现毛玻璃的模糊效 ...
iOS 毛玻璃效果的实现方法
iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...
vscode卸载background插件_使用插件一键启用 Visual Studio Code 的毛玻璃效果
本文原文发布于我的博客 https://eyhn.in 上一次我介绍了使用 "Custom CSS and JS Loader" 插件为 MacOS 开启毛玻璃效果.现在我把它做 ...
css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
iOS开发之实现毛玻璃效果及图片模糊效果
毛玻璃效果的实现 App设计时往往会用到一些模糊效果或者毛玻璃效果,iOS目前已提供了一些模糊API可以让我们方便使用.苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如 ...
css3 仿aero,让Qt支持Win7的Aero和毛玻璃效果
Qt5增加了许多特性,其中 Qt Windows Extras 模块就增加了对Win7 Aero 效果的支持. 官网的介绍如下: Qt Windows Extras provide classes a ...
android毛玻璃遮罩效果_css3毛玻璃效果[模糊图片]
希望有一天大家都能在借鉴中创新实现图片遮罩的毛玻璃效果代码段很少,这里直接放效果视屏: https://www.zhihu.com/video/1222879519775842304 牵涉关键代码: ...

毛玻璃效果（摘抄练习）

毛玻璃效果（摘抄练习）相关推荐

最新文章

热门文章