小颖在上一篇一步一步教你用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. .NET Core中间件的注册和管道的构建（1）---- 注册和构建原理

    .NET Core中间件的注册和管道的构建(1)---- 注册和构建原理 0x00 问题的产生 管道是.NET Core中非常关键的一个概念,很多重要的组件都以中间件的形式存在,包括权限管理.会话管理 ...

  2. MVVM模式解析和在WPF中的实现（三）命令绑定

    MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. WPF 微信 MVVM 【续】修复部分用户无法获取列表

    看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...

  4. [APUE]文件和目录(中)

    一.link.unlink.remove和rename 一个文件可以有多个目录项指向其i节点.使用link函数可以创建一个指向现存文件连接 #include <unistd.h> int ...

  5. NLP点滴——文本相似度

    [TOC] 前言 在自然语言处理过程中,经常会涉及到如何度量两个文本之间的相似性,我们都知道文本是一种高维的语义空间,如何对其进行抽象分解,从而能够站在数学角度去量化其相似性.而有了文本之间相似性的度 ...

  6. iOS之App Store上架被拒Legal - 5.1.5问题

    今天在看到App Store 上架过程中,苹果公司反馈的拒绝原因发现了这么一个问题: Legal - 5.1.5 Your app uses background location services ...

  7. Oracle 列数据聚合方法汇总

    网上流传众多列数据聚合方法,现将各方法整理汇总,以做备忘. wm_concat 该方法来自wmsys下的wm_concat函数,属于Oracle内部函数,返回值类型varchar2,最大字符数4000 ...

  8. Collections

    2017-01-06  22:50:43 数据结构和算法 <如何学习数据结构?>:https://www.zhihu.com/question/21318658 <How do I ...

  9. ASP.NET 5 Beta 7 版本

    在 VS2015 发布的同时,微软也发布了 ASP.NET 5 的路线图(详见ASP.NET 5 Schedule and Roadmap : https://github.com/aspnet/ho ...

  10. C#与C++的发展历程第一 - 由C#3.0起

    俗话说学以致用,本系列的出发点就在于总结C#和C++的一些新特性,并给出实例说明这些新特性的使用场景.前几篇文章将以C#的新特性为纲领,并同时介绍C++中相似的功能的新特性,最后一篇文章将总结之前几篇 ...