效果预览：http://hovertree.com/texiao/js/22/

效果图：

代码如下：

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>CSS3+JS梅花飘落 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/js/22/themes/hovertreemeihua.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div style="margin-top:60px;"><h2>若非一番寒彻骨，哪得梅花扑鼻香</h2>

<h2>问世间情为何物，直教人生死相许</h2>

<a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/h/bjaf/meihua.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a>

</div>

<div id="hewenqi">

<div class="playHovertree"> </div>

<div class="pauseHovertree hovertreerun"> </div>

</div>

<link href="http://hovertree.com/texiao/js/22/themes/hovertreemusic.css" rel="stylesheet" />

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>

<script src="http://hovertree.com/texiao/js/22/themes/hovertreemusic.js"></script>

<script src="http://hovertree.com/texiao/js/22/themes/hovertreemeihua.js"></script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/meihua.htm

推荐：http://hovertree.com/h/bjaf/h9tb5itb.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

CSS3梅花三弄特效的更多相关文章

  1. css3动画特效：上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  2. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  3. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  4. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  5. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  6. 9款赏心悦目的HTML5/CSS3应用特效

    经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...

  7. CSS3悬停特效合集Hover.css

    CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  9. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

随机推荐

  1. .NET面试题系列[13] - LINQ to Object

    .NET面试题系列目录 名言警句 "C# 3.0所有特性的提出都是更好地为LINQ服务的" - Learning Hard LINQ是Language Integrated Que ...

  2. WPF - 属性系统 （1 of 4）

    本来我希望这一系列文章能够深入讲解WPF属性系统的实现以及XAML编译器是如何使用这些依赖项属性的,并在最后分析WPF属性系统的实际实现代码.但是在编写的过程中发现对WPF属性系统代码的讲解要求之前的 ...

  3. Backbone源码分析（三）

    Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...

  4. .NET 基础 一步步 一幕幕 [.NET 系列预热]

    .NET 系列预热 .NET : 一般指.Net Framework框架.一种平台,一种技术. .NET 下的编程语言有C#,F#,VB:在这里我们主要讲述的C#. .NET 一般都能干什么呢? l  ...

  5. iOS开发--应用崩溃日志揭秘（二）

    场景 4: 吃棒棒糖时闪退! 用户邮件说, “当rage master吃棒棒糖时应用就闪退…” 另一用户说, “我让rage master 吃棒棒糖,没几次应用就闪退了!”崩溃日志如下: Incide ...

  6. MySQL_01之MySQL数据库基础

    1.通过SQL(结构化查询语言)操作数据库: DDL:数据定义语言,创建库,创建表,选择: DML:数据操作语言,完成数据增删改: DQL:数据查询语言,完成数据查询: DCL:数据控制语言,授权.回 ...

  7. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  8. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  9. java.util.NoSuchElementException: Timeout waiting for idle object

    出现这个问题第一个想法就是连接池的参数设置问题,把最大连接数量设置大一些就行了,但是我就一个客服端访问服务器,连接池连接数量不可能会不够用.我的项目架构是spring mvc+hibernate,用s ...

  10. 近期博客内容的规划（关于Swift语言）

    因为最近事情比较多,有一段时间没有发表博客了.前一段时间,利用空余时间翻译了一本关于Swif的书籍,过一段时间就会出版吧.通过翻译此书,英语水平没提高多少,不过Swift算是系统的学习了一下. 在翻译 ...