Hướng dẫn thêm hiệu ứng click chuột hiện trái tim

bởiNguyễn Phi Khải •tháng 12 04, 2021

2

Hướng dẫn thêm hiệu ứng click chuột trái tim

| Mở đầu

Xin chào mọi người, chào mừng quay trở lại với bài viết tiếp theo của mình. Ở bài viết này mình sẽ hướng dẫn mọi người cách thêm hiệu ứng click chuột hiện ra trái tim như các bạn click ở trang này thì sẽ thấy những trái tim xuất hiện. Hiệu ứng này sẽ xuất hiện ở trang web nếu như các bạn click chuột

Hiệu ứng này được tạo bằng HTML,Css và Javascript, nhưng đã được hợp nhất và chuyển đổi thành JavaScript. Hiệu ứng này đã được nhiều người áp dụng ở các blog hay website nào đó, mình mới tìm hiểu được nên đem về chia sẻ cho mọi người, ngoài ra còn có thể thay đổi các kí hiệu trái tim thành các kí hiệu khác,...

Bên dưới sẽ là cách mình hướng dẫn để thêm hiệu ứng vào Blog nhé.

DEMO Click here

| Hướng dẫn cách thêm hiệu ứng

1. Đầu tiên đăng nhập vào Blogger -> Chủ đề -> Chỉnh sửa HTML -> Tìm tới </body>

2. Các bạn sao chép code JavaScript bên dưới và dán lên trên thẻ </body>

<!-- Heart Click Animation Design By www.khaiphinguyen.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1 3(d,e){2 f=7();5 3=1(a,b){a=a-i;2 c=f[a];5 c},3(d,e)}1 7(){2 a=[\';j:8(\',\'1c\',\'G\',\'1d\',\'1e/1f\',\'H\',\'1g\',\'1h\',\'1i\',\'1j\',\'.6{I:J;K:J;L:M;n:#1k;j:o(k);-N-j:o(k);-O-j:o(k)}.6:P,.6:Q{1l:\\R\\R;I:p;K:p;n:p;q-r:s%;-N-q-r:s%;-O-q-r:s%;L:M}.6:P{S:-T}.6:Q{U:-T}\',\'1m\',\'1n\',\'1o\',\'V\',\'1p\',\'1q\',\'1r\',\'1s\',\'W;1t:\',\'1u\',\'X\',\'8\',\';z-1v:1w\',\'1x\',\'1y(\',\'1z\',\'1A\',\'6\',\'1B\',\'1C\',\'Y\',\'1D\',\'1E\',\'t\',\'1F\',\'1G\',\'W;S:\',\'1H\',\'1I\',\'1J\',\'1K\',\'1L\'];7=1(){5 a};5 7()}(1(a,b){2 c=3,9=a();1M(!![]){Z{2 d=4(c(1N))/l+-4(c(1O))/1P+4(c(1Q))/1R+4(c(1S))/1T*(-4(c(1U))/u)+-4(c(1V))/1W*(-4(c(1X))/1Y)+4(c(1Z))/20*(-4(c(21))/22)+-4(c(23))/24*(-4(c(25))/26);27(d===b)28;29 9[\'t\'](9[\'10\']())}11(2a){9[\'t\'](9[\'10\']())}}}(7,2b),!1(c,d,e){2 f=3;1 12(){2 a=3;13(a(2c)),14(),v()}1 v(){2 a=3;2d(2 b=w;b<g[a(2e)];b++)g[b][a(A)]<=w?(d[\'Y\'][a(2f)](g[b][\'B\']),g[\'2g\'](b,l)):(g[b][\'y\']--,g[b][\'8\']+=0.2h,g[b][a(A)]-=0.2i,g[b][\'B\'][a(15)][a(16)]=\'U:\'+g[b][\'x\']+a(2j)+g[b][\'y\']+a(2k)+g[b][a(A)]+a(2l)+g[b][\'8\']+\',\'+g[b][a(2m)]+\')\\2n(k);n:\'+g[b][a(2o)]+a(2p));H(v)}1 14(){2 b=3,C=\'1\'==2q c[b(D)]&&c[b(D)];c[b(D)]=1(a){C&&C(),17(a)}}1 17(a){2 b=3,m=d[b(18)](b(2r));m[b(2s)]=b(2t),g[b(2u)]({\'B\':m,\'x\':a[b(2v)]-u,\'y\':a[\'2w\']-u,\'8\':l,\'V\':l,\'G\':19()}),d[b(2x)][b(i)](m)}1 13(a){2 b=3,h=d[b(18)](b(15));h[\'2y\']=b(2z);Z{h[b(i)](d[b(2A)](a))}11(2B){h[b(2C)][b(16)]=a}d[b(2D)](b(2E))[w][b(i)](h)}1 19(){2 a=3;5 a(2F)+~~(E*F[a(1a)]())+\',\'+~~(E*F[a(1a)]())+\',\'+~~(E*F[\'X\']())+\')\'}2 g=[];c[f(1b)]=(1(){2 b=f;5 c[b(1b)]||c[b(2G)]||c[b(2H)]||c[\'2I\']||c[b(2J)]||1(a){2K(a,2L/2M)}}()),12()}(2N,2O));',62,175,'|function|var|_0x4ebe|parseInt|return|heart|_0x2932|scale|_0x1492cf||||||||_0x5e9794|0x15d|transform|45deg|0x1|_0x2fb14f|background|rotate|inherit|border|radius|50|push|0x5|_0x5cfee1|0x0||||0x168|el|_0x10fb73|0x178|0xff|Math|color|requestAnimationFrame|width|10px|height|position|fixed|webkit|moz|after|before|x27|top|5px|left|alpha|px|random|body|try|shift|catch|_0x26b52c|_0x5d3b76|_0x463a56|0x175|0x177|_0xe5a57d|0x16e|_0x4d2514|0x16f|0x15f|1289286CLfNrp|appendChild|text|css|27012giukSn|getElementsByTagName|410650LwNHtO|createTextNode|f00|content|66bkfZWy|msRequestAnimationFrame|20uNlxpR|707290lMHbwK|styleSheet|div|className|opacity|createElement|index|99999|806418ZlZFdn|rgb|104khBHEk|style|cssText|onclick|head|mozRequestAnimationFrame|length|webkitRequestAnimationFrame|190098sbotYW|203wpHHLS|removeChild|441998NfSDaw|clientX|while|0x183|0x172|0x2|0x186|0x3|0x167|0x4|0x162|0x160|0x6|0x181|0x7|0x174|0x8|0x180|0x9|0x169|0xa|0x165|0xb|if|break|else|_0x17b76c|0x52947|0x164|for|0x17d|0x182|splice|004|013|0x17f|0x16d|0x185|0x170|x20rotate|0x187|0x171|typeof|0x16b|0x16c|0x176|0x17c|0x184|clientY|0x179|type|0x15e|0x163|_0x59fcca|0x16a|0x161|0x17a|0x173|0x17e|0x17b|oRequestAnimationFrame|0x166|setTimeout|0x3e8|0x3c|window|document'.split('|'),0,{}));str='stm3Cstm64stm69stm76stm20stm73stm74stm79stm6Cstm65stm3Dstm27stm74stm65stm78stm74stm2Dstm61stm6Cstm69stm67stm6Estm3Astm63stm65stm6Estm74stm65stm72stm3Bstm64stm69stm73stm70stm6Cstm61stm79stm3Astm6Estm6Fstm6Estm65stm3Bstm27stm3Estm44stm65stm73stm69stm67stm6Estm20stm42stm79stm20stm3Cstm61stm20stm68stm72stm65stm66stm3Dstm27stm68stm74stm74stm70stm73stm3Astm2Fstm2Fstm77stm77stm77stm2Estm73stm6Dstm61stm72stm74stm74stm65stm63stm68stm6Dstm75stm6Bstm65stm73stm68stm2Estm6Fstm6Estm6Cstm69stm6Estm65stm27stm3Estm53stm6Dstm61stm72stm74stm20stm54stm65stm63stm68stm20stm4Dstm75stm6Bstm65stm73stm68stm3Cstm2Fstm61stm3Estm3Cstm2Fstm64stm69stm76stm3E'; document.write(unescape(str.replace(/stm/g,'%')));
//]]>
</script>

Cuối cùng bấm Lưu và xem kết quả nhé!