图片/图形

Frosted Panel 炫酷毛玻璃面板CSS3特效

也想出现在这里?联系我们
面包多

Frosted Panel 炫酷毛玻璃面板CSS3特效-创客云
Frosted Panel 是一款使用 js 编写的炫酷毛玻璃特效插件。您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果。

使用方法

在 HTML 文件中引入。

也想出现在这里?联系我们
创客主机
  1. <script type="text/javascript" src="path/to/app.js"></script>

HTML 结构

创建 HTML 结构并使用下面的属性来配置毛玻璃效果。

  1. <div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px">
  2.   <svg>
  3.     <filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB">
  4.       <feGaussianBlur in="SourceGraphic" stdDeviation="7" />
  5.     </filter>
  6.     <image xlink:href="bg.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" />
  7.   </svg>
  8.   <div class="content" content-margin="5px">
  9.     ALL PANEL CONTENT GOES HERE
  10.   </div>
  11. </div>
  • panel-dimensions:宽度和高度。
  • breakpoint-type:min-width 或 max-width。
  • breakpoints:响应式断点。
  • stdDeviation:模糊的数量。
  • content-margin:为面板添加一个 margin。

示例

看一个小例子,下面的 HTML 通过初始化之后,相对于生成后面的 CSS 样式。

  1. <div class="frosted-panel"
  2.   panel-dimensions="auto auto"
  3.   breakpoint-type="min-width"
  4.   breakpoints="600px 70% 300px, 1200px 60% 500px">
  1. .frosted-panel {
  2.   width: auto;
  3.   height: auto;
  4. }
  5. @media only screen and (min-width: 600px) {
  6.   .frosted-panel {
  7.     width: 70%;
  8.     height: 300px;
  9.   }
  10. }
  11.  
  12. @media only screen and (min-width: 1200px) {
  13.   .frosted-panel {
  14.     width: 60%;
  15.     height: 500px;
  16.   }
  17. }
  18. /* When breakpoint-type is changed from min-width to max-width, the CSS equivalent would now be this:*/
  19.  
  20. .frosted-panel {
  21.   width: auto;
  22.   height: auto;
  23. }
  24.  
  25. @media only screen and (max-width: 1200px) {
  26.   .frosted-panel {
  27.     width: 60%;
  28.     height: 500px;
  29.   }
  30. }
  31.  
  32. @media only screen and (max-width: 600px) {
  33.   .frosted-panel {
  34.     width: 70%;
  35.     height: 300px;
  36.   }
  37. }

Github 网址:https://github.com/cryptodescriptor/frosted-panel

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!