免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

HTML5實(shí)現(xiàn)的柳葉飄動(dòng)效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>HTML5實(shí)現(xiàn)的柳葉飄動(dòng)效果_網(wǎng)頁(yè)代碼站(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 >網(wǎng)頁(yè)代碼站</a> - 最專業(yè)的網(wǎng)頁(yè)代碼下載網(wǎng)站 - 致力為中國(guó)站長(zhǎng)提供有質(zhì)量的網(wǎng)頁(yè)代碼！</p>
</body>
</html>

十年的富縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整富縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“富縣網(wǎng)站設(shè)計(jì)”,“富縣網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

當(dāng)前文章：HTML5實(shí)現(xiàn)的柳葉飄動(dòng)效果
地址分享：http://newbst.com/article4/jhshie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、響應(yīng)式網(wǎng)站、、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)