柳叶飘动

.qmg_leaf_div{width:500px;height:200px;overflow:hidden;}

.qmg_leaf_acti{width:267px;height:260px;background:url('//ku.shouce.ren/files/images/201601/56a3252b1a18c.gif') no-repeat;position: absolute;right:0;top:0;}

.qmg_leaf_all{width:250px;height:260px;position:absolute;right:0;top:0}.qmg_leaf1,.qmg_leaf2,.qmg_leaf3,.qmg_leaf4,.qmg_leaf6,.qmg_leaf7,.qmg_leaf8,.qmg_leaf9,.qmg_leaf10,.qmg_leaf11{opacity: 0;-moz-opacity:0;filter:alpha(opacity=0);position: absolute;z-index:1;}

.qmg_leaf7{filter:alpha(opacity=100);}

.qmg_leaf8{filter:alpha(opacity=100);}

.qmg_leaf9{filter:alpha(opacity=100);}

.qmg_leaf10{filter:alpha(opacity=100);}

.qmg_leaf11{filter:alpha(opacity=100);}

.qmg_leaf1{

-webkit-animation:fade 10s linear infinite,drop 10s ease-in infinite;

}

.qmg_leaf1 img{

-webkit-animation:turnround 10s ease-in-out infinite;

}

@-webkit-keyframes fade{

0% { opacity: 0; }

1% { opacity: 1; }

80% { opacity: 1; }

100% { opacity: 0; }

}

@-webkit-keyframes drop{

0% { -webkit-transform: translate(40px, 90px);}

100% { -webkit-transform: translate(40px, 200px);}

}

@-webkit-keyframes turnround{

0% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(50px,0px);}

40% { -webkit-transform:rotateZ(-15deg) rotateX(0deg) translate(-200px,10px);}

70% { -webkit-transform:rotateZ(0deg) rotateX(10deg) translate(-300px,100px);}

100% { -webkit-transform:rotateZ(-10deg) rotateX(20deg) translate(-400px,150px);}

}

.qmg_leaf1{

-moz-animation:fade 10s linear infinite,drop 10s ease-in infinite;

}

.qmg_leaf1 img{

-moz-animation:turnround 10s ease-in-out infinite;

}

@-moz-keyframes fade{

0% { opacity: 0;-moz-opacity:0; }

1% { opacity: 1; -moz-opacity:1;}

80% { opacity: 1; -moz-opacity:1;}

100% { opacity: 0; -moz-opacity:0;}

}

@-moz-keyframes drop{

0% { -moz-transform: translate(40px, 90px);}

100% { -moz-transform: translate(40px, 200px);}

}

@-moz-keyframes turnround{

0% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(50px,0px);}

40% { -moz-transform:rotateZ(-15deg) rotateX(0deg) translate(-200px,10px);}

70% { -moz-transform:rotateZ(0deg) rotateX(10deg) translate(-300px,100px);}

100% { -moz-transform:rotateZ(-10deg) rotateX(20deg) translate(-400px,150px);}

}

/*qmg_leaf 2*/

.qmg_leaf2{

-webkit-animation:fade2 10s linear infinite,drop2 10s ease-in infinite;

}

.qmg_leaf2 img{

-webkit-animation:turnround2 10s 0.1s ease-in-out infinite;

}

@-webkit-keyframes fade2{

0% { opacity: 1; }

35% { opacity: 1; }

40% { opacity: 0; }

100% { opacity: 0; }

}

@-webkit-keyframes drop2{

0% { -webkit-transform:translate(55px, 155px);-webkit-transform-origin: 50% 50%;}

100% { -webkit-transform: translate(-10px, 200px);}

}

@-webkit-keyframes turnround2{

0% { -webkit-transform:rotateX(0deg) rotateY(0deg) translateY(0px);}

1% { -webkit-transform:rotateX(-10deg) rotateY(-10deg) translateY(0px);}

40% { -webkit-transform:rotateX(10deg) rotateY(700deg) translateY(150px);}

100% { -webkit-transform:rotateX(10deg) rotateY(700deg) translateY(150px);}

}

.qmg_leaf2{

-moz-animation:fade2 10s linear infinite,drop2 10s ease-in infinite;

}

.qmg_leaf2 img{

-moz-animation:turnround2 10s 0.1s ease-in-out infinite;

}

@-moz-keyframes fade2{

0% { opacity: 1; -moz-opacity:1;}

35% { opacity: 1; -moz-opacity:1;}

40% { opacity: 0; -moz-opacity:0;}

100% { opacity: 0; -moz-opacity:0;}

}

@-moz-keyframes drop2{

0% { -moz-transform:translate(55px, 155px);-moz-transform-origin: 50% 50%;}

100% { -moz-transform: translate(-10px, 200px);}

}

@-moz-keyframes turnround2{

0% { -moz-transform:rotateX(0deg) rotateY(0deg) translateY(0px);}

1% { -moz-transform:rotateX(-10deg) rotateY(-10deg) translateY(0px);}

40% { -moz-transform:rotateX(10deg) rotateY(700deg) translateY(150px);}

100% { -moz-transform:rotateX(10deg) rotateY(700deg) translateY(150px);}

}

/*qmg_leaf 3*/

.qmg_leaf3{

-webkit-transform:rotate(30deg);

-webkit-animation:fade3 10s 2s linear infinite,drop3 10s 2s ease-in infinite;

}

.qmg_leaf3 img{

-webkit-animation:turnround3 10s 2s ease-in-out infinite;

}

@-webkit-keyframes fade3{

0% { opacity: 0; }

10% { opacity: 1; }

10% { opacity: 1; }

80% { opacity: 1; }

100% { opacity: 0; }

}

@-webkit-keyframes drop3{

0% { -webkit-transform:translate(130px, 50px);}

100% { -webkit-transform: translate(-10px, 200px);}

}

@-webkit-keyframes turnround3{

0% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

50% { -webkit-transform:rotateZ(90deg) rotateX(0deg) translate(20px,150px);}

100% { -webkit-transform:rotateZ(-10deg) rotateX(0deg) translate(-250px,100px);}

}

.qmg_leaf3{

-moz-transform:rotate(30deg);

-moz-animation:fade3 10s 2s linear infinite,drop3 10s 2s ease-in infinite;

}

.qmg_leaf3 img{

-moz-animation:turnround3 10s 2s ease-in-out infinite;

}

@-moz-keyframes fade3{

0% { opacity: 0; -moz-opacity:0;}

10% { opacity: 1; -moz-opacity:1;}

10% { opacity: 1; -moz-opacity:1;}

80% { opacity: 1; -moz-opacity:1;}

100% { opacity: 0; -moz-opacity:0;}

}

@-moz-keyframes drop3{

0% { -moz-transform:translate(130px, 50px);}

100% { -moz-transform: translate(-10px, 200px);}

}

@-moz-keyframes turnround3{

0% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

50% { -moz-transform:rotateZ(90deg) rotateX(0deg) translate(20px,150px);}

100% { -moz-transform:rotateZ(-10deg) rotateX(0deg) translate(-250px,100px);}

}

/*qmg_leaf 4*/

.qmg_leaf4{

-webkit-transform:rotate(30deg);

-webkit-animation:fade4 14s 1s linear infinite,drop4 14s 1s ease-in infinite;

}

.qmg_leaf4 img{

-webkit-animation:turnround4 14s 1s ease-in-out infinite;

}

@-webkit-keyframes fade4{

0% { opacity: 1; }

49% { opacity: 0; }

50%{opacity: 0; }

51% { opacity: 0; }

52% { opacity: 1; }

100% { opacity: 0; }

}

@-webkit-keyframes drop4{

0% {-webkit-transform: translate(40px, -20px);}

49% {-webkit-transform: translate(-300px, 150px);}

50% {-webkit-transform: translate(-180px, -20px);}

51% {-webkit-transform: translate(-180px, -20px);}

52% {-webkit-transform: translate(-180px, -20px);}

100% {-webkit-transform: translate(-300px, 150px);}

}

@-webkit-keyframes turnround4{

0% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

25% { -webkit-transform:rotateZ(90deg) rotateX(0deg) translate(50px,150px);}

49% { -webkit-transform:rotateZ(-10deg) rotateX(0deg) translate(-200px,0px);}

50% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

51% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

52% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

75% { -webkit-transform:rotateZ(90deg) rotateX(0deg) translate(50px,150px);}

100% { -webkit-transform:rotateZ(-10deg) rotateX(0deg) translate(-200px,0px);}

}

.qmg_leaf4{

-moz-transform:rotate(30deg);

-moz-animation:fade4 14s 1s linear infinite,drop4 14s 1s ease-in infinite;

}

.qmg_leaf4 img{

-moz-animation:turnround4 14s 1s ease-in-out infinite;

}

@-moz-keyframes fade4{

0% { opacity: 1; -moz-opacity:1;}

49% { opacity: 0; -moz-opacity:0;}

50% {opacity: 0; -moz-opacity:0;}

51% { opacity: 0; -moz-opacity:0;}

52% { opacity: 1; -moz-opacity:1;}

100% { opacity: 0; -moz-opacity:0;}

}

@-moz-keyframes drop4{

0% {-moz-transform: translate(40px, -20px);}

49% {-moz-transform: translate(-300px, 150px);}

50% {-moz-transform: translate(-180px, -20px);}

51% {-moz-transform: translate(-180px, -20px);}

52% {-moz-transform: translate(-180px, -20px);}

100% {-moz-transform: translate(-300px, 150px);}

}

@-moz-keyframes turnround4{

0% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

25% { -moz-transform:rotateZ(90deg) rotateX(0deg) translate(50px,150px);}

49% { -moz-transform:rotateZ(-10deg) rotateX(0deg) translate(-200px,0px);}

50% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

51% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

52% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(0px,0px);}

75% { -moz-transform:rotateZ(90deg) rotateX(0deg) translate(50px,150px);}

100% { -moz-transform:rotateZ(-10deg) rotateX(0deg) translate(-200px,0px);}

}

/*qmg_leaf 6*/

.qmg_leaf6{

z-index:300;

-webkit-animation:fade6 12s 3s linear infinite,drop6 12s 3s ease-in infinite;

}

.qmg_leaf6 img{

-webkit-animation:turnround6 12s 3s ease-in-out infinite;

}

@-webkit-keyframes fade6{

0% { opacity: 1; }

80% { opacity: 1; }

100% { opacity: 0; }

}

@-webkit-keyframes drop6{

0% { -webkit-transform:translate(-180px, -10px);}

100% { -webkit-transform: translate(-240px, 150px);}

}

@-webkit-keyframes turnround6{

0% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(50px,0px);}

50% { -webkit-transform:rotateZ(90deg) rotateX(0deg) translate(100px,100px);}

100% { -webkit-transform:rotateZ(0deg) rotateX(0deg) translate(280px,300px);}

}

.qmg_leaf6{

z-index:300;

-moz-animation:fade6 12s 3s linear infinite,drop6 12s 3s ease-in infinite;

}

.qmg_leaf6 img{

-moz-animation:turnround6 12s 3s ease-in-out infinite;

}

@-moz-keyframes fade6{

0% { opacity: 1; -moz-opacity:1;}

80% { opacity: 1; -moz-opacity:1;}

100% { opacity: 0; -moz-opacity:0;}

}

@-moz-keyframes drop6{

0% { -moz-transform:translate(-180px, -10px);}

100% { -moz-transform: translate(-420px, 150px);}

}

@-moz-keyframes turnround6{

0% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(50px,0px);}

50% { -moz-transform:rotateZ(90deg) rotateX(0deg) translate(100px,100px);}

100% { -moz-transform:rotateZ(0deg) rotateX(0deg) translate(280px,300px);}

}

window.onload = function(){

function qm_appendStr(obj, html){

var oDiv=document.createElement('div');

oDiv.innerHTML=html;

while(oDiv.childNodes.length){

obj.appendChild(oDiv.childNodes[0]);

}

}

function getByClassName(obj, sClass){

var aEle = obj.getElementsByTagName('*');

var i = 0;

var aResult = [];

for(i=0;i

if(aEle[i].className == sClass){

aResult.push(aEle[i]);

}

}

return aResult;

}

var qingmingjie_str = '

'+

'

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

';

qm_appendStr(document.getElementsByTagName('body')[0],qingmingjie_str);

var qmgLeaf7 = getByClassName('qmg_leaf7')[0],

qmgLeaf8 = getByClassName('qmg_leaf8')[0],

qmgLeaf9 = getByClassName('qmg_leaf9')[0],

qmgLeaf10 = getByClassName('qmg_leaf10')[0],

qmgLeaf11 = getByClassName('qmg_leaf11')[0];

/*ie leaf*/

if(T.browser.ie){

function bezier(curve, rate){

if (!curve || !curve.length) return [];

if (curve.length == 1) return [curve[0][0], curve[0][1]];

if (curve.length == 2) return [

curve[0][0] + (curve[1][0] - curve[0][0]) * rate,

curve[0][1] + (curve[1][1] - curve[0][1]) * rate

];

var temp = [];

for (var i = 1; i < curve.length; i++){

temp.push(bezier([curve[i - 1], curve[i]], rate));

}

return bezier(temp, rate);

}

function rand_pm(obj,xy,rote){

var pos = bezier(xy,rote);

obj.style.right = parseInt(pos[0]) + 'px';

obj.style.top = parseInt(pos[1]) + 'px';

}

setInterval(function(){

rand_pm(qmgLeaf7,[[0,0],[150,92],[133,388],[416,380]],(+new Date) % 7000 / 7000);

rand_pm(qmgLeaf8,[[1,37],[296,27],[84,154],[537,107]],(+new Date) % 4000 / 4000);

rand_pm(qmgLeaf9,[[150,10],[296,27],[83,345],[562,292]],(+new Date) % 6000 / 6000);

rand_pm(qmgLeaf10,[[150,10],[296,27],[83,345],[276,340]],(+new Date) % 5000 / 5000);

rand_pm(qmgLeaf11,[[248,10],[462,142],[83,345],[459,251]],(+new Date) % 7000 / 7000);

}, 30);

}

}

清明html模板,HTML5清明节柳叶飘动特效相关推荐

  1. html飘羽毛效果,HTML5实现的柳叶飘动效果

    HTML5实现的柳叶飘动效果_网页代码站(www.webdm.cn) .qmg_leaf_div{width:500px;height:200px;overflow:hidden;} .qmg_lea ...

  2. html5 云朵飘动效果,jQuery超有趣的白云飘动特效插件

    jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件.天空中白云朵朵,你可以通过这个插件来设置云朵的大小.位置.模糊以及被风吹动的效果. 安装 可以使用bower安装这个白云飘动 ...

  3. 传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...

    模板名称:(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载 本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,创意设 ...

  4. 织梦dede模板|HTML5建材陶瓷装修设计网站织梦dede模板源码[自适应手机版]

    织梦dede模板|HTML5建材陶瓷装修设计网站织梦dede模板源码[自适应手机版] 下载地址: http://www.bytepan.com/92dZgmVlywY

  5. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  6. 各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。

    各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 下载链接 各种风格404错误页面html模板源码3 ...

  7. 各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码

    各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...

  8. 170 套各种公司网站模板软件公司网站模板企业网站模板创意设计公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应

    170 套各种公司网站模板软件公司网站模板企业网站模板创意设计公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首页,二级页面,三级页面,登陆,购 ...

  9. ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效

    本文作者html5tricks,转载请注明出处 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...

  10. html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效

    原标题:7款超华丽的HTML5 Canvas文字动画特效 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...

最新文章

  1. 比特币耶稣Roger Ver：世界正转向BCH
  2. Linux下硬盘安装linux
  3. Java日志性能那些事
  4. crontab 每5分钟_Crontab安装步骤和命令使用详细解说
  5. 为什么直接ping知乎的ip不能访问知乎的网站，而百度就可以？
  6. python完全支持面向对象编程思想_面向对象的编程思想和Python的类，访问和属性，继承...
  7. pycharm同步代码到远程服务器
  8. 输入和用户界面——总结
  9. VS2019 配置QT
  10. 40+ 张最全 Linux / C / C++ 思维导图，收藏！
  11. 安装科来-csnas_tech_12.0.5.12506_x64
  12. windows 7 自带计算器详解
  13. PyQt5项目：网速监控器
  14. 基于Unity3D的黄金矿工
  15. HMC_Recovery_V7R730 安装步骤
  16. pe装机时看不到电脑的硬盘
  17. 解除网卡绑定（多台电脑上网）
  18. 二维数组8：设计题 RingBuffer的原理和实现
  19. Rocket MQ 问题集
  20. dp P1968 美元汇率 题解

热门文章

  1. 视频转换器如何将腾讯QLV格式转换成MP4视频文件 1
  2. 【程序员如何买基金 一】基金的优势及分类
  3. DIY新浪微博Android手机客户端
  4. 用eviews做svar模型_SVAR模型制作过程
  5. 平均值 几何平均数 算术平均数 调和平均数 平方平均数
  6. 有趣的符号图画(颜文字)(I have a AC dream)(神兽护体)(保佑你次次Accepted)
  7. 自学python在家干什么好_在家这么多天，职场人在家能自学什么？
  8. cad断点快捷键_CAD命令：打断（BREAK）命令的使用技巧
  9. c语言 中的求和函数,0基础理解C语言调用汇编实现求和函数
  10. Domain Driven Design 领域驱动设计