{"id":132,"date":"2012-07-09T18:11:34","date_gmt":"2012-07-09T10:11:34","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=132"},"modified":"2012-11-26T12:00:19","modified_gmt":"2012-11-26T04:00:19","slug":"css3-animation-snow","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/css3-animation-snow.html","title":{"rendered":"CSS3 Animation – snow"},"content":{"rendered":"

\u968f\u7740\u79fb\u52a8\u7ec8\u7aef\u7684\u5927\u91cf\u666e\u53ca\uff0c\u5982\u4f55\u8282\u7ea6\u6d41\u91cf\uff0c\u4e5f\u6210\u4e86\u79fb\u52a8\u7aef\u7f51\u9875\u7684\u65b0\u8bfe\u9898\u3002CSS3\u7684\u52a8\u753b\u6548\u679c\u4e0d\u9700\u8981\u4f7fJavascript\uff0c\u5c31\u80fd\u5b9e\u73b0\u4e00\u4e9b\u7b80\u5355\u7684\u52a8\u753b\u6548\u679c\uff0c\u80fd\u4e3a\u7f51\u7ad9\u4ecb\u7ecd\u4e0d\u5c11\u201c\u4f53\u79ef\u201d\u3002\u672c\u6587\u6240\u5c55\u793a\u7684\uff0c\u5c31\u662f\u4e00\u4e2a\u6bd4\u8f83\u7b80\u5355\u7684CSS3\u52a8\u753b\u5b9e\u4f8b\u3002\u4e3b\u8981\u8fd0\u52a8\u5230\u7684CSS3\u5c5e\u6027\u6709\uff1aanimation\u3001animation-duration\u3001keyframes\u3001transform<\/p>\n

body,div,p{ margin:0; padding:0; background:#D7E3EA;}\r\n#header{\r\nwidth:100%; height:315px;\r\nbackground:url(images\/header-bg.png);\r\nbackground:url(images\/snow-bg.png), url(images\/header-bg.png);\r\nanimation:animate-snow 9s linear infinite;\r\n-moz-animation:animate-snow 9s linear infinite;\r\n-webkit-animation:animate-snow 9s linear infinite;\r\n}\r\n#wrapper{\r\nwidth:960px; height:315px; margin:auto;\r\nbackground:url(images\/wrapper-bg.png) bottom no-repeat;\r\nposition:relative;\r\n}\r\n@keyframes animate-snow{\r\n0%{ background-position:center 0,0 0;}\r\n100%{ background-position:center 850px,0 0;}\r\n}\r\n@-moz-keyframes animate-snow\r\n{\r\n0%{ background-position:center 0,0 0;}\r\n100%{ background-position:center 850px,0 0;}\r\n}\r\n@-webkit-keyframes animate-snow\r\n{\r\n0%{ background-position:center 0,0 0;}\r\n100%{ background-position:center 850px,0 0;}\r\n}\r\n.christmas-tree,.house,.snowman{\r\nposition:absolute;\r\nanimation:animate-drop 1s linear;\r\n-moz-animation:animate-drop 1s linear;\r\n-webkit-animation:animate-drop 1s linear;\r\n}\r\n.christmas-tree{\r\nwidth:128px; height:128px;\r\nbackground:url(images\/christmas_tree.png) no-repeat;\r\n}\r\n.house{\r\nwidth:256px; height:200px;\r\nbackground:url(images\/houseinsnow.png) no-repeat;\r\nleft:30px; bottom:20px;\r\n}\r\n.snowman{\r\nwidth:128px; height:128px;\r\nbackground:url(images\/snowman.png) no-repeat;\r\nleft:500px; bottom:30px;\r\nanimation-duration:.6s;\r\n-moz-animation-duration:.6s;\r\n-webkit-animation-duration:.6s;\r\n}\r\n.tree1{ left:300px; bottom:40px; animation-duration:.9s; -moz-animation-duration:.9s; -webkit-animation-duration:.9s;}\r\n.tree2{ left:400px; bottom:60px; animation-duration:.7s; -moz-animation-duration:.7s; -webkit-animation-duration:.7s;}\r\n.tree3{ left:600px; bottom:35px; animation-duration:.8s; -moz-animation-duration:.8s; -webkit-animation-duration:.8s;}\r\n.tree4{ left:700px; bottom:60px; animation-duration:.7s; -moz-animation-duration:.7s; -webkit-animation-duration:.7s;}\r\n.tree5{ left:800px; bottom:40px; animation-duration:.6s; -moz-animation-duration:.6s; -webkit-animation-duration:.6s;}\r\n@keyframes animate-drop {\r\n0% {opacity:0; transform:translate(0, -400px);}\r\n100% {opacity:1; transform:translate(0, 0);}\r\n}\r\n@-moz-keyframes animate-drop {\r\n0% {opacity:0; -moz-transform:translate(0, -400px);}\r\n100% {opacity:1; -moz-transform:translate(0, 0);}\r\n}\r\n@-webkit-keyframes animate-drop {\r\n0% {opacity:0; -webkit-transform:translate(0, -400px);}\r\n100% {opacity:1; -webkit-transform:translate(0, 0);}\r\n}<\/pre>\n
\u8bf7\u5927\u5bb6\u4f7f\u7528\u73b0\u4ee3\u6d4f\u89c8\u5668\u8bbf\u95ee\uff1a Firefox 5+, IE 10+, Chrome 6+, Safari 5+<\/p>\n
\u6f14\u793a\u5730\u5740<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u968f\u7740\u79fb\u52a8\u7ec8\u7aef\u7684\u5927\u91cf\u666e\u53ca\uff0c\u5982\u4f55\u8282\u7ea6\u6d41\u91cf\uff0c\u4e5f\u6210\u4e86\u79fb\u52a8\u7aef\u7f51\u9875\u7684\u65b0\u8bfe\u9898\u3002CSS3\u7684\u52a8\u753b\u6548\u679c\u4e0d\u9700\u8981\u4f7fJavascript\uff0c\u5c31\u80fd\u5b9e\u73b0\u4e00\u4e9b\u7b80\u5355\u7684\u52a8\u753b\u6548\u679c\uff0c\u80fd\u4e3a\u7f51\u7ad9\u4ecb\u7ecd\u4e0d\u5c11\u201c\u4f53\u79ef\u201d\u3002\u672c\u6587\u6240\u5c55\u793a\u7684\uff0c\u5c31\u662f\u4e00\u4e2a\u6bd4\u8f83\u7b80\u5355\u7684CSS3\u52a8\u753b\u5b9e\u4f8b\u3002\u4e3b\u8981\u8fd0\u52a8\u5230\u7684CSS3\u5c5e\u6027\u6709\uff1aanimation\u3001animation-duration\u3001keyframes\u3001transform<\/p>\n","protected":false},"author":1,"featured_media":133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[76,78,29],"class_list":["post-132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-css3","tag-html","tag-original"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/132"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/133"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}