您现在的位置是：网站首页> 编程资料编程资料

CSS3打造磨砂玻璃背景效果利用CSS3实现毛玻璃效果示例源码使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法CSS毛玻璃效果如何实现一款html5 canvas实现的图片玻璃碎片特效css实现照片模糊效果类似毛玻璃效果css3 iphone玻璃透明气泡完美实现基于CSS3实现图片模糊过滤效果手机网页web app 图片为何不清晰非常之模糊的原因html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因灵活运用CSS3特性绘制简易版围棋效果

2021-09-04 996人已围观

简介 这篇文章主要为大家详细介绍了CSS3如何打造磨砂玻璃背景效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

简介

这个效果是在看CSS Secrets这书上看到的,感觉很不错;

实现原理也挺简单的;

效果图及实现

效果图

代码实现

CSS Code复制内容到剪贴板
  1.   
  2. "en">   
  3.        
  4.         "UTF-8">   
  5.         Document   
  6.            
  7.        
  8.        
  9.         "description">   
  10.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   
  11.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
  12.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   
  13.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   
  14.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   
  15.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
  16.         

      
  17.        
  18.   

总结

这种实现模式是考虑了性能来写的,以及维护上的考虑
- 比如使用了em,可以很轻松的放大缩小整体大小
- 这里使用了hsla,这是我第一次使用这个颜色值;以前只在ps调整这个,很不错的颜色模式.和RGBA大同小异,但是HSLA更符合人类眼睛的观看;
- 还学到了一种新的背景缩写方式

CSS Code复制内容到剪贴板
  1. /*分开写*/  
  2. background-color:#ff0;   
  3. background-image:url(background.gif);   
  4. background-repeat:no-repeat;   
  5. background-attachment:fixed;   
  6. background-position:0 0;   
  7. background-size:cover;   
  8.   
  9. /*简写*/  
  10. background: #ff0 url(background.gif) no-repeat / fixed提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：利用CSS3实现折角效果实例源码js+css3实现的折角邮票图片墙特效源码纯css3实现的折角效果(无需图片和js代码)CSS3实现简易版的刮刮乐效果利用CSS3实现毛玻璃效果示例源码CSS3实现跳动的动画效果CSS3按钮鼠标悬浮实现光圈效果源码纯CSS3实现的鼠标经过菜单动画过渡效果纯CSS3代码实现switch滑动开关按钮效果 jQuery和CSS3实现弹性过渡全屏翻页特效源码纯CSS3实现图片无间断轮播效果

    下一篇：利用纯css实现图片翻转的效果一款基于css3麻将筛子3D翻转特效的实例教程css3实现3D色子翻转特效一款利用纯css3实现的360度翻转按钮的实例教程CSS滤镜实现的颜色渐变翻转效果 纯CSS实现菜单、导航栏的3D翻转动画效果css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内css3的图形3d翻转效果应用示例CSS图片翻转动画技术详解（IE也实现了）CSS旋转与翻转使用示例详解CSS Cookbook 创建文字导航菜单和翻转特效

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网