效果预览：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. 使用VS2013分析DMP文件

    当一个发布的.NET应用程序出现app crash,无法通过日志分析异常原因时,就需要通过分析DMP文件了,传统方式是通过WinDbg来分析DMP文件,但是WinDbg用起来不是很方便,其实VS就是一 ...

  2. C语言 · 动态数组的使用

    从键盘读入n个整数,使用动态数组存储所读入的整数,并计算它们的和与平均值分别输出.要求尽可能使用函数实现程序代码.平均值为小数的只保留其整数部分. 样例输入: 5 3 4 0 0 2样例输出:9 1样 ...

  3. TODO：小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

  4. Android开发学习之路-让注解帮你简化代码，彻底抛弃findViewById

    本文主要是记录注解的使用的学习笔记,如有错误请提出. 在通常的情况下,我们在Activity中有一个View,我们要获得这个View的实例是要通过findViewById这个方法,然后这个方法返回的是 ...

  5. VS中行号对齐的辅助线（虚线）去除

    3张图 2 3

  6. ClickOnce部署（5）：自定义安全权限

    今天我们来探讨一下在ClickOnce部署中如何严格控制应用程序的权限. 演示应用 为了在下文中能更好地演示,我们先要做一个测试项目.也为了显得简单易懂,我使用最常用且最常见的WinForm项目,这是 ...

  7. JAVA基础代码分享--求圆面积

    问题描述 用户输入圆的半径,计算并显示圆的面积 代码分享 /** * @author hpu-gs * 2015/11/25 */ public class Circle { public stati ...

  8. n个结点，不同形态的二叉树（数目+生成）

    题目链接: 不同的二叉查找树:http://www.lintcode.com/zh-cn/problem/unique-binary-search-trees/ 不同的二叉查找树 II:http:// ...

  9. jsp实现邮件的发送

    如果程序出现 454 Authentication failed, please open smtp flag first! 错误,那么一般是邮箱没有开通POP3/SMTP服务,登录邮箱,在设置中开启 ...

  10. POJ2513-Colored Sticks

    /*思路:类似图论中“一笔画”问题,两根木棒的相连接的端点是一样的颜色,(a,b)--(b,c)--(c, d)....方法:trie树+并查集, 利用trie树建立字符串和某一个节点的映射,并将这些 ...