Ch\u00e0o c\u00e1c b\u1ea1n, b\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1edbi thi\u1ec7u \u0111\u1ebfn c\u00e1c b\u1ea1n 30 ki\u1ec3u Preload trang b\u1eb1ng CSS3 Animations. Trong \u0111\u00f3, jQuery s\u1eed d\u1ee5ng ch\u1ec9 \u0111\u1ec3 l\u00e0m \u1ea9n c\u00e1c h\u00ecnh \u1ea3nh \u0111\u1ed9ng. <\/p>\n
\r\n\r\n<div id="loading">\r\n <div id="loading-center">\r\n <div id="loading-center-absolute">\r\n <div id="object"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/pre>\n\u0110\u1ecbnh d\u1ea1ng CSS<\/h2>\n
\u0110\u1ea7u ti\u00ean ch\u00fang ta ph\u1ea3i c\u1ed1 \u0111\u1ecbnh div ngo\u00e0i c\u00f9ng c\u00f3 th\u1ec3 n\u1ed5i l\u00ean tr\u00ean t\u1ea5t c\u1ea3 m\u1ecdi th\u1ee9.<\/p>\n
\r\n\r\n#loading{\r\nbackground-color: #bd4932;\r\nheight: 100%;\r\nwidth: 100%;\r\nposition: fixed;\r\nz-index: 1;\r\nmargin-top: 0px;\r\ntop: 0px;\r\n}\r\n\r\n<\/pre>\nTh\u1ee9 hai, ch\u00fang ta ph\u1ea3i t\u1ea1o ra m\u1ed9t \u0111i\u1ec3m trung t\u00e2m \u0111\u00f3 lu\u00f4n lu\u00f4n s\u1ebd n\u1eb1m \u1edf gi\u1eefa.<\/p>\n
\r\n\r\n#loading-center{\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tposition: relative;\r\n}\r\n#loading-center-absolute {\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\theight: 200px;\r\n\twidth: 200px;\r\n\tmargin-top: -100px;\r\n\tmargin-left: -100px;\r\n}\r\n\r\n<\/pre>\nTh\u1ee9 ba v\u00e0 \u0111i\u1ec1u cu\u1ed1i c\u00f9ng ch\u00fang ta ph\u1ea3i l\u00e0m l\u00e0 \u0111\u1ecbnh d\u1ea1ng “#object” s\u1eed d\u1ee5ng c\u00e1c khung h\u00ecnh ch\u00ednh. B\u1ea1n s\u1ebd nh\u1eadn th\u1ea5y r\u1eb1ng t\u00f4i s\u1eed d\u1ee5ng keyframe hai l\u1ea7n ‘@-webkit-keyframe’ v\u00e0 ‘@-webkit-keyframes animate’ \u0111\u1ea7u ti\u00ean l\u00e0 d\u00e0nh cho tr\u00ecnh duy\u1ec7t d\u1ef1a tr\u00ean webkit th\u1ee9 hai l\u00e0 d\u00e0nh cho tr\u00ecnh duy\u1ec7t Internet Explorer.<\/p>\n
\r\n\r\n#object{\r\n\twidth: 80px;\r\n\theight: 80px;\r\n\tbackground-color: #FFF;\r\n\t-webkit-animation: animate 1s infinite ease-in-out;\r\n\tanimation: animate 1s infinite ease-in-out;\r\n\tmargin-right: auto;\r\n\tmargin-left: auto;\r\n\tmargin-top: 60px;\r\n}\r\n@-webkit-keyframes animate {\r\n 0% { -webkit-transform: perspective(160px); }\r\n 50% { -webkit-transform: perspective(160px) rotateY(-180deg); }\r\n 100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }\r\n}\r\n \r\n@keyframes animate {\r\n 0% { \r\n transform: perspective(160px) rotateX(0deg) rotateY(0deg);\r\n -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); \r\n } 50% { \r\n transform: perspective(160px) rotateX(-180deg) rotateY(0deg);\r\n -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;\r\n } 100% { \r\n transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);\r\n -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);\r\n }\r\n}\r\n\r\n<\/pre>\nTrong b\u1ea3n demo ch\u00fang t\u00f4i thi\u1ebft l\u1eadp JavaScript \u0111\u1ec3 \u1ea9n c\u00e1c h\u00ecnh \u1ea3nh \u0111\u1ed9ng khi b\u1ea1n click v\u00e0o n\u00f3.<\/p>\n
\r\n\r\n$(window).load(function() {\r\n\t$("#loading-center").click(function() {\r\n\t$("#loading").fadeOut(500);\r\n\t})\t\t\r\n});\r\n\r\n<\/pre>\nN\u1ebfu b\u1ea1n mu\u1ed1n khi v\u1eeba load trang web th\u00ec s\u1ebd hi\u1ec3n th\u1ecb. Ch\u00fang ta s\u1eed d\u1ee5ng \u0111o\u1ea1n javascript sau:<\/p>\n
\r\n\r\n$(window).load(function() {\r\n $("#loading").fadeOut(500);\r\n})\r\n\r\n<\/pre>\n[button color=”blue” size=”medium” link=”http:\/\/tapchicntt.com\/Demo\/2015\/css-page-preload-animations\/” target=”blank” ]Demo[\/button] [button color=”red” size=”medium” link=”http:\/\/www.mediafire.com\/download\/w2wbk64qg4sq5r5\/css-page-preload-animations.rar” target=”blank” ]Download[\/button]<\/center><\/p>\n Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
Ch\u00e0o c\u00e1c b\u1ea1n, b\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1edbi thi\u1ec7u \u0111\u1ebfn c\u00e1c b\u1ea1n 30 ki\u1ec3u Preload trang b\u1eb1ng CSS3 Animations. Trong […]<\/p>\n","protected":false},"author":6,"featured_media":4310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-4309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-thu-thuat-jquery"],"views":447,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=4309"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/4310"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=4309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=4309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=4309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}