{"id":1333,"date":"2017-04-17T10:26:03","date_gmt":"2017-04-17T02:26:03","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=1333"},"modified":"2017-04-17T10:26:03","modified_gmt":"2017-04-17T02:26:03","slug":"html5%e4%bb%bf%e6%94%af%e4%bb%98%e5%ae%9d%e8%9a%82%e8%9a%81%e6%a3%ae%e6%9e%97%e3%80%81qq%e5%86%9c%e5%9c%ba%e5%b0%8f%e6%a0%91%e6%b5%87%e6%b0%b4%e9%95%bf%e5%a4%a7%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=1333","title":{"rendered":"HTML5\u4eff\u652f\u4ed8\u5b9d\u8682\u8681\u68ee\u6797\u3001QQ\u519c\u573a\u5c0f\u6811\u6d47\u6c34\u957f\u5927\u6548\u679c"},"content":{"rendered":"

\n\t\u57282016\u5e74\u652f\u4ed8\u5b9d\u63a8\u51fa\u4e86\u8682\u8681\u68ee\u6797<\/a>\uff0c\u7c7b\u4f3c\u4e8eQQ\u519c\u573a<\/a>\uff0c\u4e0d\u8fc7\u8682\u8681\u68ee\u6797\u4e3b\u8981\u662f\u516c\u76ca\u6027\u9879\u76ee\u3002\u4eca\u5929\u6211\u4eec\u4e0d\u8bb2\u5077\u83dc\u653b\u7565\uff0c\u5c06\u4f7f\u7528\u6280\u672f\u624b\u6bb5\u6765\u89e3\u5256\u8682\u8681\u68ee\u6797\u7684\u6d47\u6c34\u52a8\u753b\u3002\n<\/p>\n

\n\t\u672c\u6587\u7528\u5230\u7684\u77e5\u8bc6\u70b9\uff1aHTML5<\/a>\uff0cCSS3<\/a>\uff0canimation \u548c keyframes\u3002\n<\/p>\n

\n\t\u52a8\u753b\u6548\u679c
\n<\/h2>\n

\n\t\"HTML5\n<\/p>\n

\n\tHTML5\u4ee3\u7801
\n<\/h2>\n

\n\t\u5168\u90e8\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n

\r\n<!DOCTYPE>\r\n<html>\r\n<head>\r\n    <meta http-equiv="Content-Type" content="text\/html;charset=UTF-8">\r\n    <title>\u6d47\u6c34<\/title>\r\n    <script src="http:\/\/zeptojs.com\/zepto.min.js"><\/script>\r\n    <style>\r\n        \/* animation *\/\r\n        .a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}\r\n        .bottle-fadeIn{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}\r\n        .a-watering{-webkit-animation:0.5s ease 0 3;-moz-animation:0.5s ease  0 3;-ms-animation:0.5s ease  0 3;animation:0.5s ease  0 3;}\r\n        \r\n        \/* \u6447\u6446 *\/\r\n        .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}\r\n        .bottle-fadeIn{-webkit-animation-name:bottleFadeIn;-moz-animation-name:bottleFadeIn;-ms-animation-name:bottleFadeIn;animation-name:bottleFadeIn;}\r\n        .a-watering{-webkit-animation-name:watering;-moz-animation-name:watering;-ms-animation-name:watering;animation-name:watering;}\r\n\r\n        \/*\u6c34\u74f6\u52a8\u753b*\/\r\n        @-webkit-keyframes bottleFadeIn{\r\n            0%{opacity:0;top:80px;right:0;-webkit-transform:rotate(0deg);}\r\n            100%{opacity:1;top:180px;right:100px;-webkit-transform:rotate(-45deg);}\r\n        }\r\n        \/*\u6d41\u6c34\u52a8\u753b*\/\r\n        @-webkit-keyframes watering{\r\n            0%{opacity:0;}\r\n            100%{opacity:1;height:4px;}\r\n        }\r\n\r\n        \/* \u6447\u6446 *\/\r\n        @-webkit-keyframes swing{\r\n             \/*10%{-webkit-transform:rotate(-5deg);}\r\n             20%{-webkit-transform:rotate(5deg);}\r\n             30%{-webkit-transform:rotate(-5deg);}\r\n             40%{-webkit-transform:rotate(5deg);}\r\n             50%{-webkit-transform:rotate(-5deg);}\r\n             60%{-webkit-transform:rotate(5deg);}\r\n             80%{-webkit-transform:rotate(-5deg);}\r\n             100%{-webkit-transform:rotate(0);}  *\/\r\n             \/*0%{-webkit-transform:scale(1,1);}\r\n             20%{-webkit-transform:scale(1.1,1.1);}\r\n             40%{-webkit-transform:scale(1.2,1.2);}\r\n             60%{-webkit-transform:scale(1.1,1.1);}\r\n             80%{-webkit-transform:scale(1.2,1.2);}\r\n            100%{-webkit-transform:scale(1,1);} *\/\r\n            \/*0%{-webkit-transform:scale(1,1);}\r\n            20%{-webkit-transform:scale(1.02,1.02);}\r\n            40%{-webkit-transform:scale(1.05,1.05);}\r\n            60%{-webkit-transform:scale(1.07,1.07);}\r\n            80%{-webkit-transform:scale(1.1,1.1);}\r\n            100%{-webkit-transform:scale(1.2,1.2);}*\/\r\n            0%{-webkit-transform:scale(1,1);}\r\n            35%{-webkit-transform:scale(1.07,1.07);}\r\n            70%{-webkit-transform:scale(1.1,1.1);}\r\n            100%{-webkit-transform:scale(1.2,1.2);}\r\n        }\r\n        @-moz-keyframes swing{\r\n            20%{-moz-transform:rotate(15deg);}\r\n            40%{-moz-transform:rotate(-10deg);}\r\n            60%{-moz-transform:rotate(5deg);}\r\n            80%{-moz-transform:rotate(-5deg);}\r\n            100%{-moz-transform:rotate(0);}\r\n        }\r\n        @-ms-keyframes swing{\r\n            20%{-ms-transform:rotate(15deg);}\r\n            40%{-ms-transform:rotate(-10deg);}\r\n            60%{-ms-transform:rotate(5deg);}\r\n            80%{-ms-transform:rotate(-5deg);}\r\n            100%{-ms-transform:rotate(0);}\r\n        }\r\n        @keyframes swing{\r\n            20%{transform:rotate(15deg);}\r\n            40%{transform:rotate(-10deg);}\r\n            60%{transform:rotate(5deg);}\r\n            80%{transform:rotate(-5deg);}\r\n            100%{transform:rotate(0);}\r\n        }\r\n    <\/style>\r\n    <script>\r\n        $(function(){\r\n            $('#btn').click(function(){\r\n                $('.bottle').show().addClass('bottle-fadeIn');\r\n                $('.bottle').on('webkitAnimationEnd',function(){\r\n                    $(this).removeClass('bottle-fadeIn');\r\n                    $('.line li').addClass('a-watering');\r\n                });\r\n                $('.line li').on('webkitAnimationEnd',function(){\r\n                    $('.bottle').hide();\r\n                    $('.line li').removeClass('a-watering');\r\n                    $('.tree').addClass('a-swing');\r\n                });\r\n                $('.tree').on('webkitAnimationEnd',function(){\r\n\r\n                    $('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});\r\n                    $('.tree').removeClass('a-swing');\r\n                })\r\n                \/\/ setTimeout(function(){\r\n                \/\/     $('.line li').addClass('a-watering');\r\n                \/\/ },800);\r\n                \/\/ setTimeout(function(){\r\n                \/\/     $('.bottle').hide();\r\n                \/\/     $('.tree').addClass('a-swing');\r\n                \/\/ },2300);\r\n                \/\/ setTimeout(function(){\r\n                \/\/     $('.line li').removeClass('a-watering');\r\n                \/\/     $('.tree').removeClass('a-swing');\r\n                \/\/     $('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});\r\n                \/\/ },3300);\r\n            });\r\n        })\r\n    <\/script>\r\n    <style>\r\n    *{margin:0;padding:0;list-style: none;}\r\n    .box{width:500px;border:1px solid #ddd;margin:10px auto;overflow:hidden;position: relative;padding-bottom:30px;}\r\n    .tree{width:208px;height:300px;background:url(images\/shu.png) no-repeat;\r\n        margin:250px auto 0;}\r\n    .bottle{position:absolute;top:180px;right:100px;width:90px;height:65px;background:url(images\/sashui.png) no-repeat;display:none; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);} \r\n    .rain_box{position:absolute;overflow:hidden;top:220px;right:190px;}\r\n    .rain_box .line{width:4px;float:left;position:relative;}\r\n    .rain_box .line li{margin-top:2px;height:2px;width:2px;background:#999;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;opacity:0;} \r\n    .rain_box .line1{-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);margin-left:15px;}\r\n    .rain_box .line2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);margin-left:2px;} \r\n    .rain_box .line3{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);margin-left:3px;}\r\n    #btn{position:absolute;top:80px;right:10px;height:20px;width:50px;background:#f60;border:none;color:#fff;}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class="box">\r\n        <!-- \u6811 -->\r\n        <div class="tree"><\/div>\r\n        <!-- \/\u6811 -->\r\n        <!-- \u6c34\u74f6 -->\r\n        <div class="bottle" alt="a-watering"><\/div>\r\n        <!-- \/\u6c34\u74f6 -->\r\n        <!-- \u96e8\u6c34 -->\r\n        <div class="rain_box">\r\n            <ul class="line line1">\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n            <\/ul>\r\n            <ul class="line line2">\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n            <\/ul>\r\n            <ul class="line line3">\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n                <li><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n        <!-- \/\u96e8\u6c34 -->\r\n        <input type="button" id="btn" value="\u6d47\u6c34" \/>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » HTML5\u4eff\u652f\u4ed8\u5b9d\u8682\u8681\u68ee\u6797\u3001QQ\u519c\u573a\u5c0f\u6811\u6d47\u6c34\u957f\u5927\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u57282016\u5e74\u652f\u4ed8\u5b9d\u63a8\u51fa\u4e86\u8682\u8681\u68ee\u6797\uff0c\u7c7b\u4f3c\u4e8eQQ\u519c\u573a\uff0c\u4e0d\u8fc7\u8682\u8681\u68ee\u6797\u4e3b\u8981\u662f\u516c\u76ca\u6027\u9879\u76ee\u3002\u4eca\u5929\u6211\u4eec\u4e0d\u8bb2\u5077\u83dc\u653b\u7565\uff0c\u5c06\u4f7f\u7528\u6280 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[149,1080,117,1081,1082],"class_list":["post-1333","post","type-post","status-publish","format-standard","hentry","category-html5","tag-keyframes","tag-animation","tag-css3","tag-webkitanimationend","tag-zepto-js"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1333"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1333\/revisions"}],"predecessor-version":[{"id":1334,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1333\/revisions\/1334"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}