华灯初上，窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你，望着雨中的夜色，是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。

这里仅是用CSS技术来演示这样的一个场景，可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果，将使用到HAML和Sass。

案例效果

看到上面的效果是不是有点像人站室内看窗外雨中的夜景，窗户上雨滴的效果是那么的真实，窗外的夜景却又是那么的模糊。咱们不在诗意化了，我想大家更为关注的是用什么样的技术来实现这样的一个效果。

预处理器

在这个示例中，使用了HAML和Sass来替代我们熟悉的HTML和CSS。主要是为了制作雨滴需要上百个

元素，另外需要对上百个

写样式，毕竟每个雨滴都长得不一致嘛。使用预处理器除了可以帮助我们减少工作量之外，还可以使用预处理器中的循环、变量等。最主要的是可以使用随机函数产生的随机值，让我们不需要单独处理上百个雨滴。

有关于HAML和Sass的语法可以各自到其官网上查阅。如果你自己本地电脑不具备这样的开发环境，可以直接在Codepen创建DEMO，并且选择对应的预处理器。在HTML和CSS的配置中选择对应的预处理器。比如在HTML设置中选择HAML，在CSS设置中选择SCSS。

有关于Sass更多的中文教程，可以点击这里阅读。

结构

制作窗户雨滴的效果，其结构并不太复杂。主要分两个层次，其中是窗户，而另个是雨滴。在案例中使用.window来表示窗户，在.raindrops容器中放置了上面个雨滴.雨滴是通过.border和.drops来制作。并且将窗户.window和雨滴.raindrops都放置在容器.container中：

.container

.window

.raindrops

.borders

- (1..120).each do

.border

.drops

- (1..120).each do

.raindrop

编译出来的结构：

html中擦窗效果,纯CSS写的小雨打在窗户上效果相关推荐

  1. 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？

    纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  2. 纯CSS实现圆角阴影的折角效果

    纯CSS实现圆角阴影的折角效果  2016-10-04 13:14   网页设计   标签:css   1637    2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...

  3. 纯 CSS 实现优惠券透明圆形镂空打孔效果

    本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果 我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...

  4. 《uni-app》移动端纯CSS实现不等高的瀑布流效果

    <uni-app>移动端纯CSS实现不等高的瀑布流效果 前言 示例 WEB端示例 移动端示例 瀑布流实现 第一种: flex 核心代码 实现 缺点 完整代码 第二种:column-coun ...

  5. 纯css写单选框和复选框的样式和功能

    只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...

  6. css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...

    本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...

  7. css3 乌云散去,纯css实现乌云密布的天气图标效果

    效果 效果如下 ​ 实现思路 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影 增加动画 dom结构 用两个嵌套的div容器,父容器来 ...

  8. android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...

  9. 纯css写的类似花纹图案的立体动态旋转

    纯css写的类似花纹图案的立体动态旋转 动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&qu ...

最新文章

  1. HQL中的substring
  2. MORAN文本识别算法开源，刷新多个OCR数据集state-of-the-art
  3. Java Object 类 深入分析
  4. 20201023：力扣第37场双周赛（上）
  5. （转载）C# Process.Kill() 拒绝访问(Access Denied) 的解决方案
  6. 572g装固态 acer v3_联想 thinkpad R60E 0658DE2 升级SSD 固态硬盘方案？宏碁V3-572G-51MR光驱位加装固态硬盘应该买什么样接口类型的...
  7. 基于用户的协同过滤推荐算法（整合）
  8. 图片放大镜 jQuery插件
  9. WIN7打开远程桌面连接设置
  10. 大数据组件监控体系构建
  11. 奇迹服务器数据修改,奇迹Mu商业服务端 客户端装备外观修改说明！
  12. Python百日百行代码挑战-day7，游戏模块学习，tkinter
  13. 华硕双路服务器主板装系统,华硕双路服务器主板Z8PE-D12X
  14. 中国数字经济投资态势分析及发展前景深度评估报告2022-2028年版
  15. iOS 图标和文字自定按钮
  16. 使用 Kitten 编程猫绘制一个魔方
  17. SuperMap GIS 9D(2019)产品白皮书_V2018Q4R1
  18. 计算机无法外接投影,笔记本电脑连接投影仪无信号解决步骤
  19. 培养下一个埃隆马斯克？AI+教育可以成为好起点
  20. Linux解决syntax error near unexpected token`问题

热门文章

  1. css3 media媒体查询器用法总结
  2. Java容易搞错的知识点
  3. wordpress 安装（亲身经历） 出现“Fatal error: Call to undefined function get_magic_quotes_gpc()”之后的解决方法...
  4. 转：RSS阅读、社会化阅读与个性化阅读
  5. Nhibernate代码自动生成工具[转]
  6. ASP.NET中实现MSN通知消息功能
  7. JavaEE实战班第十五天
  8. 致程序猿：专业课老师没教的，都在这8本书里了
  9. 不会用Photoshop抠图？Python助你一键“除”人！
  10. IT = 加班多？外国小哥打破“魔咒”：“每天工作 10 分钟，工资近 9 万美元！”...