小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果。

第一步:

利用伪元素before和 :after画两个重叠在一起的长方形,如图所示:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <style media="screen">
  8. body {
  9. overflow-y: hidden;
  10. }
  11.  
  12. .heart-body {
  13. width: 500px;
  14. margin: 100px auto;
  15. position: relative;
  16. }
  17.  
  18. .snowfall-flakes:before,
  19. .snowfall-flakes:after {
  20. content: "";
  21. position: absolute;
  22. left: 0px;
  23. top: 0px;
  24. display: block;
  25. width: 30px;
  26. height: 46px;
  27. background: red;
  28. border-radius: 50px 50px 0 0;
  29. }
  30.  
  31. </style>
  32. </head>
  33.  
  34. <body>
  35. <div class="heart-body">
  36. <div class="snowfall-flakes"></div>
  37. </div>
  38. </body>
  39.  
  40. </html>

第二步:

利用 transform  属性将两个两个伪元素分别旋转负45度、45度,如图所示:

  1. .snowfall-flakes:before {
  2. -webkit-transform: rotate(-45deg);
  3. /* Safari 和 Chrome */
  4. -moz-transform: rotate(-45deg);
  5. /* Firefox */
  6. -ms-transform: rotate(-45deg);
  7. /* IE 9 */
  8. -o-transform: rotate(-45deg);
  9. /* Opera */
  10. transform: rotate(-45deg);
  11. }
  12.  
  13. .snowfall-flakes:after {
  14. -webkit-transform: rotate(45deg);
  15. /* Safari 和 Chrome */
  16. -moz-transform: rotate(45deg);
  17. /* Firefox */
  18. -ms-transform: rotate(45deg);
  19. /* IE 9 */
  20. -o-transform: rotate(45deg);
  21. /* Opera */
  22. transform: rotate(45deg);
  23. }

第三步:

利用 left 属性,将伪元素 after 向左偏移一定像素,使两个微元素部分重叠,组成爱心样子,如图所示:

  1. .snowfall-flakes:after {
  2. left: 13px;
  3. -webkit-transform: rotate(45deg);
  4. /* Safari 和 Chrome */
  5. -moz-transform: rotate(45deg);
  6. /* Firefox */
  7. -ms-transform: rotate(45deg);
  8. /* IE 9 */
  9. -o-transform: rotate(45deg);
  10. /* Opera */
  11. transform: rotate(45deg);
  12. }

爱心我们画完了,那么怎么让爱心实现满屏飞呢,其实只需要调用jquery.js和 snowfall.jquery.js就能实现,效果图如下:

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <style media="screen">
  8. body {
  9. overflow: hidden;
  10. }
  11.  
  12. .heart-body {
  13. width: 500px;
  14. margin: 100px auto;
  15. position: relative;
  16. }
  17.  
  18. .snowfall-flakes:before,
  19. .snowfall-flakes:after {
  20. content: "";
  21. position: absolute;
  22. left: 0px;
  23. top: 0px;
  24. display: block;
  25. width: 30px;
  26. height: 46px;
  27. background: red;
  28. border-radius: 50px 50px 0 0;
  29. }
  30.  
  31. .snowfall-flakes:before {
  32. -webkit-transform: rotate(-45deg);
  33. /* Safari 和 Chrome */
  34. -moz-transform: rotate(-45deg);
  35. /* Firefox */
  36. -ms-transform: rotate(-45deg);
  37. /* IE 9 */
  38. -o-transform: rotate(-45deg);
  39. /* Opera */
  40. transform: rotate(-45deg);
  41. }
  42.  
  43. .snowfall-flakes:after {
  44. left: 13px;
  45. -webkit-transform: rotate(45deg);
  46. /* Safari 和 Chrome */
  47. -moz-transform: rotate(45deg);
  48. /* Firefox */
  49. -ms-transform: rotate(45deg);
  50. /* IE 9 */
  51. -o-transform: rotate(45deg);
  52. /* Opera */
  53. transform: rotate(45deg);
  54. }
  55. </style>
  56. </head>
  57.  
  58. <body>
  59. <script src="js/jquery.js" type="text/javascript"></script>
  60. <script src="js/snowfall.jquery.js"></script>
  61. <script>
  62. //调用飘落函数 实现飘落效果
  63. $(document).snowfall({
  64. flakeCount: 50 //爱心的个数
  65. });
  66. </script>
  67. </body>
  68.  
  69. </html>

其实小颖觉得爱心画小一点比较好看,上面画那么大其实是为了方便大家看爱心更明显一些,小颖把爱心画小后,就好看多了,效果图如下:

小的爱心,需改变以下属性的值:

  1. .snowfall-flakes:before,
  2. .snowfall-flakes:after {
  3. width: 10px;
  4. height: 16px;
  5. border-radius: 10px 10px 0 0;
  6. }
  7.  
  8. .snowfall-flakes:after {
  9. left: 4px;
  10. }

希望小颖的分享大家喜欢哦,嘻嘻,下班喽,小颖要回家喽

利用snowfall.jquery.js实现爱心满屏飞的更多相关文章

  1. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  2. 第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片

    1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  4. js利用clipboardData在网页中实现截屏粘贴的功能

    目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboard ...

  5. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  6. Easyui layout设置满屏效果

    html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  7. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  8. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  9. Jquery实现手机上下滑屏滑动的特效代码

    要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...

随机推荐

  1. Cassandra简介

    在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...

  2. 谈谈DOMContentLoaded:Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  3. MySQL设置字段的默认值为当前系统时间

    问题产生: 当我们在对某个字段进行设置时间默认值,该默认值必须是的当前记录的插入时间,那么就将当前系统时间作为该记录创建的时间. 应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,应该由数据 ...

  4. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

  5. Android菜单项内容大全

    一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...

  6. Android中的多线程断点下载

    首先来看一下多线程下载的原理.多线程下载就是将同一个网络上的原始文件根据线程个数分成均等份,然后每个单独的线程下载对应的一部分,然后再将下载好的文件按照原始文件的顺序"拼接"起来就 ...

  7. Mysql - 数据库操作

    之前介绍了数据库的增删改查, 发现忘记了数据库的一些基本操作, 比如建库, 建表, 改表等等. 那这里就来小结一下数据库sql形式的基本操作. 一.库操作 1. 建库 在建库之前, 可能需要看一下, ...

  8. Linux学习

    Linux 命令英文全称su:Swith user 切换用户,切换到root用户cat: Concatenate 串联uname: Unix name 系统名称df: Disk free 空余硬盘du ...

  9. WPF - 属性系统 (3 of 4)

    依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...

  10. Guava库介绍之实用工具类

    作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文是我写的Google开源的Java编程库Guava系列之一,主要介 ...