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

第一步：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

        body {

            overflow-y: hidden;

        }

        .heart-body {

            width: 500px;

            margin: 100px auto;

            position: relative;

        }

        .snowfall-flakes:before,

        .snowfall-flakes:after {

            content: "";

            position: absolute;

            left: 0px;

            top: 0px;

            display: block;

            width: 30px;

            height: 46px;

            background: red;

            border-radius: 50px 50px 0 0;

        }

    </style>

</head>

<body>

    <div class="heart-body">

        <div class="snowfall-flakes"></div>

    </div>

</body>

</html>

第二步：

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

        .snowfall-flakes:before {

            -webkit-transform: rotate(-45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(-45deg);

            /* Firefox */

            -ms-transform: rotate(-45deg);

            /* IE 9 */

            -o-transform: rotate(-45deg);

            /* Opera */

            transform: rotate(-45deg);

        }

        .snowfall-flakes:after {

            -webkit-transform: rotate(45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(45deg);

            /* Firefox */

            -ms-transform: rotate(45deg);

            /* IE 9 */

            -o-transform: rotate(45deg);

            /* Opera */

            transform: rotate(45deg);

        }

第三步：

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

        .snowfall-flakes:after {

            left: 13px;

            -webkit-transform: rotate(45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(45deg);

            /* Firefox */

            -ms-transform: rotate(45deg);

            /* IE 9 */

            -o-transform: rotate(45deg);

            /* Opera */

            transform: rotate(45deg);

        }

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

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

        body {

            overflow: hidden;

        }

        .heart-body {

            width: 500px;

            margin: 100px auto;

            position: relative;

        }

        .snowfall-flakes:before,

        .snowfall-flakes:after {

            content: "";

            position: absolute;

            left: 0px;

            top: 0px;

            display: block;

            width: 30px;

            height: 46px;

            background: red;

            border-radius: 50px 50px 0 0;

        }

        .snowfall-flakes:before {

            -webkit-transform: rotate(-45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(-45deg);

            /* Firefox */

            -ms-transform: rotate(-45deg);

            /* IE 9 */

            -o-transform: rotate(-45deg);

            /* Opera */

            transform: rotate(-45deg);

        }

        .snowfall-flakes:after {

            left: 13px;

            -webkit-transform: rotate(45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(45deg);

            /* Firefox */

            -ms-transform: rotate(45deg);

            /* IE 9 */

            -o-transform: rotate(45deg);

            /* Opera */

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

  <script src="js/jquery.js" type="text/javascript"></script>

  <script src="js/snowfall.jquery.js"></script>

  <script>

      //调用飘落函数 实现飘落效果

      $(document).snowfall({

          flakeCount: 50 //爱心的个数

      });

  </script>

</body>

</html>

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

小的爱心，需改变以下属性的值：

        .snowfall-flakes:before,

        .snowfall-flakes:after {

            width: 10px;

            height: 16px;

            border-radius: 10px 10px 0 0;

        }

        .snowfall-flakes:after {

            left: 4px;

        }

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

利用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. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  2. Database Replay和Consolidated Database replay

    简介 在数据库的迁移和升级场景中,我们经常会遇到一个问题:在做压力测试时,如何模拟真实的业务压力,解决这个问题的方法有很多,比如:应用方开发模拟程序或者使用压力测试工具模拟,如load runner, ...

  3. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  4. CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法

    今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net Framework Data Provider 可能没有安装. 下面找到官方的文档说明: SQLi ...

  5. SQL Server-聚焦查询计划Stream Aggregate VS Hash Match Aggregate（二十）

    前言 之前系列中在查询计划中一直出现Stream Aggregate,当时也只是做了基本了解,对于查询计划中出现的操作,我们都需要去详细研究下,只有这样才能对查询计划执行的每一步操作都了如指掌,所以才 ...

  6. CRL快速开发框架系列教程十二(MongoDB支持)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. PHP好用但又容易忽略的小知识

    1.PHP函数之判断函数是否存在 当我们创建了自定义函数,并且了解了可变函数的用法,为了确保程序调用的函数是存在的,经常会先使用function_exists判断一下函数是否存在.同样的method_ ...

  8. 登录（ajax提交数据和后台校验）

    1.前台ajax数据提交 <form id="login_form" action="" method="POST"> < ...

  9. 使用python自动生成docker nginx反向代理配置

    由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...

  10. mysql查询性能优化

    mysql查询过程: 客户端发送查询请求. 服务器检查查询缓存,如果命中缓存,则返回结果,否则,继续执行. 服务器进行sql解析,预处理,再由优化器生成执行计划. Mysql调用存储引擎API执行优化 ...