小颖在上一篇一步一步教你用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. UWP 律师查询 MVVM

    APP简介 律师查询是基于聚合数据的律师查询接口做的,这个接口目前处于停用状态,但是,由于我是之前申请的,所以,还可以用,应该是无法再申请了. 效果图 开发 一.HttpHelper 既然是请求接口的 ...

  2. [虾扯蛋] android界面框架-Window

    从纯sdk及framwork的角度看,android中界面框架相关的类型有:Window,WindowManager,View等.下面就以这几个类为出发点来概览下安卓开发的"界面架构&quo ...

  3. CYQ.Data、ASP.NET Aries 百家企业使用名单

    如果您或您所在的公司正在使用此框架,请联系左侧的扣扣,告知我信息,我将为您添加链接: 以下内容为已反馈的用户,(收集始于:2016-08-08),仅展示99家: 序号 企业名称 企业网址 备注 1 山 ...

  4. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 3 Keynote: Scott Hanselman

    美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.9 是第三天, Scott Hanselman 做Keynote.今天主题围绕的是.NET ...

  5. shell简介

    Shell作为命令语言,它交互式地解释和执行用户输入的命令:作为程序设计语言,它定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和分支. shell使用的熟练程度反映了用户对U ...

  6. 展望未来：使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  7. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  8. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  9. Oracle中的commit详解

    本文转自 : http://blog.csdn.net/hzhsan/article/details/9719307 它执行的时候,你不会有什么感觉.commit在数据库编程的时候很常用,当你执行DM ...

  10. [Xamarin] 透過Native Code呼叫 JavaScript function （转帖）

    今天我們來聊聊關於如何使用WebView 中的Javascript 來呼叫 Native Code 的部分 首先,你得先來看看這篇[Xamarin] 使用Webview 來做APP因為這篇文章至少講解 ...