{"id":1975,"date":"2013-06-06T02:48:47","date_gmt":"2013-06-06T02:48:47","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=1975"},"modified":"2017-04-13T13:27:41","modified_gmt":"2017-04-13T13:27:41","slug":"tao-hieu-ung-hover-icon-don-gian-bang-css3","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/tao-hieu-ung-hover-icon-don-gian-bang-css3\/","title":{"rendered":"T\u1ea1o hi\u1ec7u \u1ee9ng Hover Icon \u0111\u01a1n gi\u1ea3n b\u1eb1ng CSS3"},"content":{"rendered":"

Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n s\u1eed d\u1ee5ng CSS3 \u0111\u1ec3 t\u1ea1o ra hi\u1ec7u \u1ee9ng hover.
\n
\n\"T\u1ea1o
\nCh\u00fang t\u00f4i chia s\u1ebb m\u1ed9t s\u1ed1 bi\u1ec3u t\u01b0\u1ee3ng v\u00e0 hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng v\u1edbi b\u1ea1n. \u0110\u1ec3 t\u1ea1o ra hi\u1ec7u \u1ee9ng tinh t\u1ebf, ch\u00fang ta s\u1eed d\u1ee5ng CSS transitions v\u00e0 animations. C\u00e1c bi\u1ec3u t\u01b0\u1ee3ng ta s\u1eed d\u1ee5ng ph\u00f4ng ch\u1eef icon (Eco Ico Matthew Skiles), ch\u00fang s\u1eed d\u1ee5ng b\u1eb1ng c\u00e1ch: ch\u00e8n v\u00e0o tr\u01b0\u1edbc pseudo-class<\/p>\n

T\u1ea1o \u0111o\u1ea1n html \u0111\u1ec3 s\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng:<\/p>\n

\r\n<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">\r\n\r\n     <a class="hi-icon hi-icon-mobile" href="#">Mobile<\/a>\r\n     <a class="hi-icon hi-icon-screen" href="#">Desktop<\/a>\r\n     <a class="hi-icon hi-icon-earth" href="#">Partners<\/a>\r\n     <a class="hi-icon hi-icon-support" href="#">Support<\/a>\r\n     <a class="hi-icon hi-icon-locked" href="#">Security<\/a>\r\n\r\n<\/div>\r\n<\/pre>\n
V\u00e0 s\u1eed d\u1ee5ng \u0111o\u1ea1n css3 sau \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u01a1n gi\u1ea3n:<\/p>\n
\r\n.hi-icon-effect-6 .hi-icon {\r\nbox-shadow: 0 0 0 4px rgba(255,255,255,1);\r\ntransition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.no-touch .hi-icon-effect-6 .hi-icon:hover {\r\nbackground: rgba(255,255,255,1);\r\ncolor: #64bb5d;\r\n}\r\n\r\n.no-touch .hi-icon-effect-6 .hi-icon:hover:before {\r\nanimation: spinAround 2s linear infinite;\r\n}\r\n\r\n@keyframes spinAround {\r\nfrom {\r\ntransform: rotate(0deg)\r\n}\r\nto {\r\ntransform: rotate(360deg);\r\n}\r\n}\r\n\r\n<\/pre>\n
Demo<\/a> |<\/p>\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n s\u1eed d\u1ee5ng CSS3 \u0111\u1ec3 t\u1ea1o ra hi\u1ec7u \u1ee9ng hover.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-1975","post","type-post","status-publish","format-standard","hentry","category-html-css"],"views":454,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1975","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=1975"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1975\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=1975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}