小颖在上一篇一步一步教你用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. python核心编程第二版练习题答案

    2-5 #写一个while循环,输出整型为0~10 a=0while a<11: print a a+=1 #写一个for循环重复以上操作 for i in range(11): print i ...

  2. ASP.NET Aries 入门开发教程5：自定义列表页工具栏区

    前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...

  3. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  4. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

  6. PAT甲级 1001. A+B Format (20)

    题目原文: Calculate a + b and output the sum in standard format -- that is, the digits must be separated ...

  7. CentOS Mono Nginx 部署 MVC4+WebApi

    CentOS Mono Nginx 部署 MVC4+WebApi 经过几天的折磨,终于在CentOS上成功部署了MVC4+WebApi.Mono上的服务器推荐两种:Jexus(国产高人写的一款很牛的服 ...

  8. 分布式唯一ID生成服务

    SNService是一款基于分布式的唯一ID生成服务,主要用于提供大数量业务数据建立唯一ID的需要;服务提供最低10K/s的唯一ID请求处理.如果你部署服务的CPU资源达到4核的情况下那该服务最低可以 ...

  9. Xamarin.Android之Fragment Walkthrough

    利用Fragment设计能够兼容不同屏幕的应用 这里我们先围观下最后的成果图,给读者打打气: 普通手机上显示的结果: 在平板上显示的结果: 笔者要郑重声明下,虽然看似是两种不同的显示效果,但是同一个应 ...

  10. CentOS7 + mono +Jexus 环境的搭建

    CentOS7的安装和配置 1,从http://www.centos.org/下载CentOS7的镜像,并在VMWare中创建该镜像的虚拟机,为方便操作,把虚拟机的网络连接设置为桥接模式:在安装过程中 ...