<style>.animate{ ???animation:myfirst 3s; ???-moz-user-select:none;/*火狐*/ ???-webkit-user-select:none;/*webkit浏览器*/ ???-ms-user-select:none;/*IE10*/ ???-khtml-user-select:none;/*早期浏览器*/ ???user-select:none;}@keyframes myfirst{ ???0% ??{ transform: scale(1); } ???10% ?{ transform: scale(1.2); } ???20% ?{ transform: scale(1); } ???30% ?{ transform: scale(1.2); } ???40% { transform: scale(1); } ???50% ?{ transform: scale(1.2); } ???60% { transform: scale(1); } ???70% ?{ transform: scale(1.2); } ???80% { transform: scale(1); } ???90% { transform: scale(1.2); } ???100% { transform: scale(1); }}</style><script>$(document).click(function(e){ ???????var list = ['学而时习之', '不亦说乎', '有朋自远方来', '不亦乐乎', '人不知而不愠', '不亦君子乎', '三人行 必有我师焉', '择其善者而从之', '其不善者而改之', '学而不思则罔', '思而不学则殆']; ???var lists = Math.floor(Math.random() * list.length); ???var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16); ???var $i = $('<span class="animate" />').text( list[lists] ); ???var xx = e.pageX || e.clientX + document.body.scroolLeft; ???var yy = e.pageY || e.clientY + document.body.scrollTop; ???$('body').append($i); ???$i.css({ ???????top: yy, ???????left: xx, ???????color: colors, ???????transform: 'translate(-50%, -50%)', ???????display: 'block', ???????position: 'absolute', ???????zIndex: 999999999999 ???}) ?????$i.animate({ ???????top: yy, ???????opacity: .5 ???}, 3000, function(){ ???????$i.remove(); ???}) ????})</script>JS 点击页面漂浮出文字2
原文地址：https://www.cnblogs.com/xiaobaiv/p/9552393.html