{"id":100,"date":"2016-05-16T23:18:56","date_gmt":"2016-05-16T15:18:56","guid":{"rendered":"http:\/\/loveuhouse.cn\/wordpress\/?p=100"},"modified":"2016-05-16T23:18:56","modified_gmt":"2016-05-16T15:18:56","slug":"%e4%bd%bf%e7%94%a8css3-animation%e5%ae%9e%e7%8e%b0gif%e5%8a%a8%e5%9b%be%e7%9a%84%e6%9a%82%e5%81%9c%e5%92%8c%e6%92%ad%e6%94%be","status":"publish","type":"post","link":"https:\/\/loveuhouse.cn\/wordpress\/?p=100","title":{"rendered":"\u4f7f\u7528CSS3 animation\u5b9e\u73b0gif\u52a8\u56fe\u7684\u6682\u505c\u548c\u64ad\u653e"},"content":{"rendered":"<p>\u6e90\u81ea\u539f\u6587\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/2015\/12\/css3-animation-js-canvas-gif-pause-stop-play\/\">\u5f20\u946b\u65ed\u2014\u2014\u946b\u7a7a\u95f4<\/a><\/p>\n<p>\u8981\u5b9e\u73b0gif\u52a8\u753b\u7684\u6682\u505c\u64ad\u653e\u6548\u679c\u6709\u5f88\u591a\u65b9\u6cd5\uff0c\u8fd9\u91cc\u53ea\u5199\u51fa\u6211\u6bd4\u8f83\u559c\u6b22\u7684\u4e00\u79cd\u3002<\/p>\n<p>animation\u6a21\u62dfgif\u52a8\u753b\u3002<\/p>\n<p>\u539f\u7406\u5c31\u662f\u9010\u5e27\u79fb\u52a8\u80cc\u666f\uff0c\u4ee5\u8fbe\u5230gif\u7684\u64ad\u653e\u6548\u679c<\/p>\n<p>gun.jpg\u5982\u4e0b\uff1a<\/p>\n<p><a href=\"https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1.jpg\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-102\" src=\"https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-300x58.jpg\" alt=\"gun\" width=\"300\" height=\"58\" srcset=\"https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-300x58.jpg 300w, https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-768x150.jpg 768w, https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-1024x199.jpg 1024w, https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-760x148.jpg 760w, https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1-348x68.jpg 348w, https:\/\/loveuhouse.cn\/wordpress\/wp-content\/uploads\/2016\/05\/gun-1.jpg 1037w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>CSS\u4ee3\u7801\u90e8\u5206\uff1a<\/p>\n<pre class=\"lang:default decode:true\">\/*\ncss\u90e8\u5206*\/\n.ball{display:block;\n        width:40px;\n        height:40px;\n\tborder-radius:80px;\n\tbackground:url(..\/images\/gun.jpg) center no-repeat ;\n        background-size:auto 100%;\n        animation: heart-burst steps(4) 0.4s infinite both;\n}\n@keyframes heart-burst {\n  0% {\n    background-position: 0%;\n  }\n  100% {\n    background-position: 100%;\n  }\n}<\/pre>\n<p>HTML\u4ee3\u7801\u90e8\u5206\uff1a<\/p>\n<pre class=\"lang:default decode:true\">\/*\nHTML\u4ee3\u7801\u90e8\u5206*\/\n&lt;div class=\"ball \" id=\"ball\" style=\"animation-play-state: paused;\"&gt;&lt;\/div&gt;\n&lt;button type=\"button\"&gt;\u70b9\u6211\u5f00\u59cb&lt;\/button&gt;<\/pre>\n<p>js\u4ee3\u7801\u90e8\u5206\uff1a<\/p>\n<pre class=\"lang:default decode:true \">\/*\njs\u4ee3\u7801\u90e8\u5206*\/\n$(\"button\").click(function(){\n    $(\".ball\").attr(\"style\",\"\");\n})<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6e90\u81ea\u539f\u6587\uff1a\u5f20\u946b\u65ed\u2014\u2014\u946b\u7a7a\u95f4 \u8981\u5b9e\u73b0gif\u52a8\u753b\u7684\u6682\u505c\u64ad\u653e\u6548\u679c\u6709\u5f88\u591a\u65b9\u6cd5\uff0c\u8fd9\u91cc\u53ea\u5199\u51fa\u6211\u6bd4\u8f83\u559c\u6b22\u7684\u4e00\u79cd\u3002 anima &hellip; <a href=\"https:\/\/loveuhouse.cn\/wordpress\/?p=100\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u4f7f\u7528CSS3 animation\u5b9e\u73b0gif\u52a8\u56fe\u7684\u6682\u505c\u548c\u64ad\u653e<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/100"}],"collection":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=100"}],"version-history":[{"count":2,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/100\/revisions\/106"}],"wp:attachment":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}