行业资讯

HTML5实现的柳叶飘动效果

发布时间：2020-07-07 16:59:32 作者：yanyan507
来源：网络 阅读：473

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>HTML5实现的柳叶飘动效果_网页代码站(www.webdm.cn)</title>
<style>
.qmg_leaf_div{width:500px;height:200px;overflow:hidden;}
.qmg_leaf_acti{width:267px;height:260px;background:url('/p_w_picpaths/20131221/qmbg3.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);}
       }
   </style>

</head>
<body>
<script>
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<aEle.length;i++){
           if(aEle[i].className == sClass){
               aResult.push(aEle[i]);
           }
       }
       return aResult;
   }    
   var qingmingjie_str = '<div class="qmg_leaf_div">'+
           '<div class="qmg_leaf_acti"></div>'+
           '<div class="qmg_leaf_all">'+
           '<div class="qmg_leaf1"><img src="/p_w_picpaths/20131221/01png.png" alt=""></div>'+
           '<div class="qmg_leaf2"><img src="/p_w_picpaths/20131221/02png.png" alt=""></div>'+
           '<div class="qmg_leaf3"><img src="/p_w_picpaths/20131221/03png.png" alt=""></div>'+
           '<div class="qmg_leaf4"><img src="/p_w_picpaths/20131221/01png.png" alt=""></div>'+
           '<div class="qmg_leaf6"><img src="/p_w_picpaths/20131221/01png.png" alt=""></div>'+
           '<div class="qmg_leaf7"><img src="/p_w_picpaths/20131221/03png.png" alt=""></div>'+
           '<div class="qmg_leaf8"><img src="/p_w_picpaths/20131221/02png.png" alt=""></div>'+
           '<div class="qmg_leaf9"><img src="/p_w_picpaths/20131221/03png.png" alt=""></div>'+
           '<div class="qmg_leaf10"><img src="/p_w_picpaths/20131221/02png.png" alt=""></div>'+
           '<div class="qmg_leaf11"><img src="/p_w_picpaths/20131221/01png.png" alt=""></div>'+
           '</div>'+
       '</div>';
   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);
   }
}
</script>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>

推荐阅读：
  1. opengl 飘动设计
  2. Android如何自定义View实现抖音飘动红心效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

images background absolute

上一篇：MongoDB Replica Set 部署

下一篇：PHP 获取网页内容的三种方法

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号