分享几段有趣的代码(一)

到处闲逛时经常能发现一些有趣的代码段,于是干脆来个大杂烩吧~

狡猾的标题栏

这个效果很多博客都使用了,看gif图:

很有趣是不是?实现的代码也很简单,在网页的任意地方加入即可:

  1. <script>  
  2. // 浏览器标题切换
  3. var OriginTitile = document.title;    // 保存之前页面标题
  4. var titleTime;  
  5. document.addEventListener('visibilitychange', function(){  
  6. if (document.hidden){  
  7.         document.title = '草榴社區主論壇 - 1024';  
  8.         clearTimeout(titleTime);  
  9.     }else{  
  10.         document.title = '生命-1s ~ ';  
  11.         titleTime = setTimeout(function() {  
  12.             document.title = OriginTitile;  
  13.         }, 2000); // 2秒后恢复原标题
  14.     }  
  15. });  
  16. </script>  

飘荡在页面左下角的蒲公英

这个也可以说是烂大街了……具体效果可以直接看本页面的左下角……

实现代码如下:

  1. <div class="dandelion">  
  2.     <span class="smalldan"></span>  
  3.     <span class="bigdan"></span>  
  4. </div>  
  5. <style type="text/css">  
  6. /* 在小屏幕自动隐藏 */  
  7. @media screen and (max-width:600px){  
  8.     .dandelion{display: none !important;}  
  9. }  
  10. .dandelion span {  
  11.     display: block;  
  12.     position: fixed;  
  13.     z-index: 9999999999;  
  14.     bottom: 0px;  
  15.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAHoFJREFUeNrsnQuYTdXfx9c5M+/zPk8YTF4iElFuFf0Z16Tw/t2KbhLpgm7EH7lEVCRJQkpUIolC+burRLnH5NLNkHvutwYzep+XmXPe/Ws+693L6cwMMvuMM+v3POs5M+fss/c5e3339/f9fdfa6/iCwaCyYeNSh9+eAhsWWDYssGxYYNmwYYFlwwLLhgWWDRsWWDYssGxYYNmwYYFlwwLLhgWWDRsWWDYssGxYYNmwYYFlwwLLhgWWDRsWWDYssGxYYNmwYYFlwwLLhgWWDRsWWDYssGxYYNmwYYFlwwLLhgWWDRsWWDYssGxYYNmwcRERm9e+8PwBt+W1r3yD04477ZhXB2wxZJllrCgCz6xMXmvrtBlso6OI0x6xjGUjNGo7bY3xf1OnnUTaBEKkzgmnzXPaNqfd6bR4p13ptOQw21uNlYdDQNGLv7s5rY7TpjnNJ1koTJ9WddpupxVzWg2nXee0RKdNyUkMWGBdfiFM87TTRsNST5DaljutB3+/xLYvOu0UYFwGW4132lqAaFOhjXPid6f1dlp5GGis8dpKp+1z2hinNQFEAqg7EPE69AL/AQssG2YI4+x02qtO+4H0dhywlXFaK6c96bR1IZoqHVAFcvLD2VSYe3VUVhGgXWc818ZpzZzW2mn3OC0GkMm+hrKNgKqm0z7ISbaywMqd0ZXOzwpUEu1Id4Wp+L53WjWnXeO0VPbRFj0mVsRZp6U5rTHazIwKTptsgRXdIXqpOn0T2j/NeSxHVbfXaU8BFklvMwHU3YCrOimwG+zVHOB95rS6TlvqtKJOG0ZqrRcGcEWsxrr8ozagOZHJ69V5va/TJjhtotM+ddpWp+3CTigAe1XgPT2dtoV0mEAa7OS0RvzdHlZrS4W52mmDeW+c04ZYxro8Q8zNATDKWlLbyTB9I/+/DJBmoqcWwkxxsNSNKsPLesxps7Eg1jvtNraTlPij0wo5bRL7qQbBiCYrzXEKUhgsBXh+gKrBWsQCK/dHIh39IP8LsHao8D6TH9AJYL6EmRKxEgZiNewgLQrYOjhts9NOO60SwPsHwJFK8hWnNYSxFjttFQwnKXEaxytDuhynMoaF/BzbAusy8KSESW6FEVoAFkVHNje2HQF44gHJKcS+Dy11EwL9LPs9C4AecNpBp92iMsYI9xmVYQuA7eOxOa/HkHaXAlp5fQEgG5sddqzGyj2stRKNs9BgK9FMLbEMFtHJTRHsBdFMAWyEADorDcbSVWI9Um1h9nkK9trotP1OG+S0FdgUE6kwpwImOcbNbJ/faZUBm6RJGXecl5llYYEV2agF+0ga2uS0dwCLBtY0GKYrLPG1064GNBPo1LMGsARQ/dFV8tzt7O8srwsTVWTfrdg+CIBXGZXoKqpGOdZVTjsE+H8FWLqAkJhjU2HuCD27QGI7ovs1p5UlPZXntedVxnQXAVkKHeunAjyAiJfUJe76GYBzrdM2sK9/kC7XwGK3cpzyACOeKvMBjqU9sqcNn2w4n7EEz8nnuwdB/xXp96MwNoVlrAjElYjm5YBmDgK5C531GADZSPqqgoWwDiCt431BANMCPfUx+3+N/ci2vyDiJXZjMQgQSpH+JL19QzrsAoji+HyxiPRy2BUCwutJxz68r+dIrT4LrMiHXOU/wRg+OkeiJv+P4TGRlDaPiqwhXlQdOn8JnpMA6lUY6p+w2SRAMke5A9QFAWx/nhf7YTQAvI/P9SiMlc57OsNiHwLAMlSaAqa5TksCsGtUyNwuC6zIxK2kt3l0sGgfGet7l8rrLkS7QjhvQSzLILO45t1hsW/Z5hlshr0AdjvP64Fqrb9O8HcS4IxHt23F9xJgHWXbZ9j2Hf5eAoO9C6OJRnuPz+SzGivyUYQUJcB6C6C8a1RtBXksifA+wP/aRjiE0L8G/+ormva+zGrxekDZFCtiB6w2gbT434BpCaynAdINcL3JcY9SYaax398oIKZxIQQtsCKrrcpzhW+ic8bQiYVJKWVJf9Kha0lB42CXlwCWpCNxyGWo5V7eGwhhJdlmGWwYT4FQHXO1AdVdY/RYHLrtYZXh7I/i875lWBlleE91Uu50Lo4mIce3GitC1eATGJaLDU9qNmDqSidrQ3Qoz/sMe2ED6acK4BxFWnqc93yPBqqM7nkEYDbg9RmYpMI89Z22B3Cv5fV+ynXglXLnbV3D3y9i2s5GE26HQa2PFcHYhvcjWSKG1obXypLCCiOM2wEonVGOoLvEGH1Wuc78eMR5AkJ+NcBKgdVS8a1SAek+wPA8DOkzQDUOg/Q740JQMOweGPMkDLsI9p1Oil1sGLqi6SZaYHlrht5Ph8ZjEwhDzSQFpSC+u8Icrxr+lJ71UBiwSYU4ldeeROe0Qb/FAaaH0ECJdPgXgKQIoCvJPgTUvfCoviP1SRO3Xpz8qlSOm7kwAsaF8hlsVh799uesjPkDbvNbjeVdrIONduNRLUDjDKcyS8EG6IulUJaUpcVzfYD5K506EQAGsC8+hY1E0B8EiLKP22GsGwHXEMC3CGthBp9hBRquMKz0CCB+Cr1VmfQXMET8UOUODy0irX70ZzkaDAbzVO9G8E5oPVxSG9FdiDLeR9OO+jA6fAFG5klej0fMdyJtXo3BKelNxhnlDp2rqDBLorE6AK6VRhEgDHcPxcS3gFmeHwFwC1JY+GCkwWiuG3k+Eb0lLPU2F8EUKstvsVCOWMbyNkTbjISdnuG5dDpoP2bpQ3T0eP7fiO91EhaqSUWmBbukvWaw1HI6vwFsVoxtUtBSIwCeguEOsz/ZR2ujEJAqsB667BRe1khApG0RXQnGY7T+xMVyxNoN3sYAhK15q5ZOK5tIU3fwfAVD4IspuRABPRqtUwCT9H4YJBXGEyugLikxn8qYh6UAxxBS6O8AaCJgLA7bLOMzjoK14gzTNcD+1/AZ12GJXIm/dS2fowwgrWtToXdRgY4S0d6KzhZx/CCd2AhmkTtv5pMW95JaWpL6+sM8TQCZbPM6rKFtivo85oM9imJVdALYwmJzSXXafO3JZ3sK8IyEgaQgkCGjtlgjfo4nn/dzGFSOK4PSx2BfqWirWcbyTl/9aoj4FegsH0ySgmh/gnS1BNEtIrozHXkDz9VAKG9lH1K1DeT1+gAkH8cqymMn2KuskRp/Zr8nAF5xNFlXGPEEOqoqVoOemvMsuqw6+20HsAewbxHv3S1jeQcsiRfQSnswKhWdOZqy/QfY4VkAonWMsF1jBPQeGKsERuUeKk3xue402CqzENbaQkqNg5mSYcLDHE/01b8AWA9AmM6FEMP3iacgOEWx8DP7l/cFrY/lTQRglN/plJZUh6eouvQc9KpUedsMUGnfqikd3RmPaz77Fk/qAdJSdvET6W8/jLTBeE2nStFMPwK6aqTJpWgyRUUYg5CvzkXxI8+vRXdZ593D2AYL6Tti+lGJ7aKK66gyHOwuyh2j09NXtlM5DgVUCpDVQocpBLzPSH/h4kY03FQY8jhgvx3WKQgDKlKjQqznB/TaYf+exx68X6+1lUgqn2mB5T1zCVg+gYn2402l0pHCYDL74DblzmHfqdzZAweU68rLjIZZ6KxShrWwi+oss7gCBpyAVlNYH2/jnWnC2YRQ/46LYhUCvTb2RnteuxcwBWBNmaiYboHlLaj0ohwPAIR/k2biAFYpI82lG4CqCABFV71GVTmbSnIpYNzJtmWz+AxHlTvNuTW+WgrAaQWwtAWyBa+rB8DZwWdaAONKyruJ9HcrjKdvLXvDAisy4HoanZVExZWMUTmJ10oClKoYnoVgsxLomf7KvQliACBIwbo4HUbA/wErSpo8xP6F+R7m73EI/x1UrXvRYzfy/4PYEL8od87WLqrYYuzzA3RgWauxvI8XjDT1NtrkA0Cj0DLNaGXopE6YliMxNj8FVEPRWNMR/pMA05cwmJkSr8BkVVSj/bEyCnBs0Xji2j8OOGT+1s2kwzLs/zqAtBPGqm/sOxVjdqpmWQssb2OGAYYBMMAwXhMzshLM8y7MJB1bmM6VWQmT6fxmgEJPcVkIU72AXhJwXR9ybAHCO4D3Tfyn7jDVQbwzhe5aRBU7g9fEIvmC4+k7tT8HcF+RIuW7PMdrm61B6r1JKlNZhqOnPqNkl0HcFuiV1TDCu+iYuQCuo3KXGmpGamoFQFeS2naRljSr/cT2a4xU/DZFwEBAtQ2ztSyfqwse1WDl3nomuklmLnyr3PsJj+N7yfTmqzn2N1rrWcbyXl8FYYcadGhhACCifKNyb55QaB9FB/eF7Y7yWAiPSa8G8wnFQBIMVle502WSSHlBjNRXAOk83iveWB/03DTl3mc4EJB1AmCN+Nx6IF2Ryk9g7IpJOlZfRTa8BVdNvCENiGOkxrnYDyKWxWl/Cl0zjs7bjMhvx/snYUso3teYbcSH0nc+awP0Bo53HxaC9p1KcqxEQL0LgOupOmUA5h3KvX9R0qRetXkLwn4pr+/hYrHAikBsxVIIKneVvQCM8glXv3TYtaQ46fwO9NVzbDsev0jBFHMBnABjJgI9XbnufAFYaz9gXcHz5dm+MSapQtjfx9/dANgU0mACx5OB58qw0zIYUJhstBbvFljex3HSmR7U1VNSfkMgb4JFaqGH9Kp6V6NhvqQiXMa2W9jHfNJjEo8bef4HBLv8LTdDyCCzjEWuh8U68JmeRWd1hg0boL8ETPou6w6k2W38L0D/FwJ+lf5OLYYsC1iNlXNRB20yC5b4PkREh6ZI6dh6iGZ9O30KftccNNFaQDUJVtlDpVcTNkpBE12n3EHs/Yh9DeA4wLiI433O9oVJdXpqsgZOe9isNxfEcVhVH+9xioX38cUClrFyNr4DWDGkuQfoxDohgNIge0NlDLW0BkQrSSsvwFSlsCakA3uQmr439jWe43xMqtIzEPTaDcJQC0iLEtupKAuSGrvz/B62PYQWqwy4BchN2CYeFhzB671gxnNKYBs5G9tIX32ownqRPvT5rwgDiWc0CDZZBWg0KO6kmtsEQAcCku10elvSaIpyp8P40ED52cczvD6c/38FxAlopIrsqyzMelC5U3jEE3sPFlUwZEG+W2fA+Kb5pW0qzHl7Qd9yJY52NTq8D0x2DKHdUbk3VaTx2EC5C4hUwHtqB6D0tJqh6KSt/J8fFloMq7ykMlz4qvz/ENttw5eKw0sbR/Wn51QVhtm2k/7S0G4vGmzcEO/sZdJ30AIrk5Df2bvYyGICYX+AcgrGGU45vxQztLfhb5mpUUBxFZ5SIuC6Cp8pAFCFbZ5g+3QAGkOKOgGAyhufRVegSexP2OZennseTbWHSnQxLHaY6jVogEemPO+GJc8qe4t9RGKjchcp0+mvC6nlSQMIG2CH8nSYpKo2pKI3eO9pgFgQQT6B53XnatZrYVgNGgxxyr1PMYb36nXg4wBQMjrqC4ATh+81GDApw7D9HYCmhStIrMa6dOHP5Hx+ZNgL6YBgDKlHV2zv4xXdz3tEG02kslMwnbBVKimxB/bDEjq0OdtL2wk7tkCvtWcf1QzW0Sx2DbpOs9Jg0qn4YfXRXnvCFBp6PxMzqXJV7CWaA+43NIUKPdjfSTGXKcACITorPWQbGW6pQsd1g5l8VJEKYFQlbTYCAIfYrjHvbwEg19DJP8M4VTBMtwPUKuyzFRprCSL+N1hJjj+SbWphdbRDuAsbjTJYyYzJKoufSYm9RCfS3FcgzAnOCxETBkDhrmbtVc0nnew1XqsNg2zGTuiHRpPoSzqaijUwjvT5FAy2FW/qK8S3+EuVlLs+aH6siARA9jb/vwlQSyHKNxnCvJRyh3+KGuy3E4Ank5YXq5BFbmMvEkShJ9RnAMmXyQm2kWEbiLb6AGC0M0R7EJvBp9w1rpoZ3tEwhPZRjFIN2E/QYSLie2J26tUAX6XdBOP9AlPp+VivYCskkWJrwWYHqSZFaz2q3DHDfez3JPqrO587XV3kUpH+MDpC5+pdPJdAFXLY4idT7boAe0GudBkYLm1oGB0rsRH02uyd6OSOVJHib8mYXA2sjG34S/EApCds818qY0qLpLbiyp3p8DmM8xEptyFso9NvQcA8GEA2wccaQyGiZ0R8HFIcXHAqNEFVlEdd4dQh12shODST9+aFlKhvic8uFSYrdxEQ8YC6GmI4gM0QQ8f6ST/d0E0nMScHoq1WKXetdwHaQvZ/BI8sCVAlIP4rcjz9OzzVAed0PpuAfSbAVTCUaK0r0Xe3077m8wRD9ORFpUIftLoCl9jP1fcjB32YL/WXE0yBEAgDOp8j7P8nSoD1n8pdMCM5E1CFdkJXde6NqdqPCnK+H6XiOwgLTQYsooNuRbz3RpNt5v1L2IcIbpmP3suoKHtTECzExxL74g9Ycjtgfg0dt8hgU0m/bwHIuwBjelakcT7AkpP1DEAQv2USV04rroRU/Jiiyv2BxQs9wZeVGZrJ/k6qv/7AZHbxunHxhSt29KD1DB7HIPgfR/TvoAhIMMDYkHRVG1CtBpgKb2wfNoekPHHXZyl3Ebdb0H16rasVyp2F4SdlbjFAHLhQLWA+r6kymS80HXpOMECWjA7ozxd6mirmBq60aYC4HXRcif+tQRs+dIdtwd86Q1uOLtNrK3xCJfdSiN6pS3/8QpFQHD2sX99NMZCfvksjLd5P6tOFxFmOm2Y8bj6f4syfhcnnN9qvXDUjqBBOUT1I7q9MVfIYOqsrV1MpqpjK7E8GPGW2YTlSpYDqPyyGsgSXvsdPOvh/6dy5yl1wNqDcW+UrwFgbIYBxkEACALoCQCynoltBdVpbuT8iMJ197gWYgZDPEsguBYZLhX5DhKoQYSbPNaWMXc2Xuh5w3UU61ONZB6hkFlO+lqA87sWVE0R8Ch3PdlKALp3PcPICmegxv5Nu0vKQuarC/K3HFF9X7uo1g8gMbWGuajjix2jbqODEjpDxwPVUhAE8rDepQL8hO2nr4xbSZCCLQuS8gKUB1JWDr+a59ngjVUF6Jw5clyvjB0w6qRbyQbm6JO1gGHXFyfXvA8iTOMHfGWDynccJjuaqMpgJoEL/Nm8cVQDoa+WuBLM65ALV275ipDStyWKwjI4bonzm3z3nsWHYajdAWsuBp5OyNpICpQK8gyvmB6h4GMASN3YCJpzoqSIGOPuwbSHljswPMKjVb3zR7E5wNEasCj90kpUGK8rFeTNZZDN98CWV3jT6yTx3wRCNdCfPrTBsjxVZsOgFG3niR3UBVNoyqEgZrUuorylLF1M5nKAMNfcjaW4UH3A8DNWGErk0QG0JcAsZOqIIAI5V4X+2Ni+YqjHZFFUmqHpwrkXz6kXU+tBHChKQ28E+VO6EQfNHM80B5eMhr6Wfr5bK6svoL5GIN3KTcodoRpPW/HghH5D2dlKZ9MM30WzzBrn6AHSdRCq8Fu9E/86L/mm0FvgmKxGLsRdwgqMRWL7z+M5FsQJOKHd+V3POc4DzP5Zz3giAlcpif/OMgiBUqAf+zpfRKbAoJqdQqQwbNOH1ElQVItC7o62+QTD2xiBVfHj9G3eSo6vwoevgyF+Ph9LFYMeVyp0zvf4CT/Df7cTcCCx/NmztR2oMo7qeRqW9kIs4Ha9J3z2tlLu0dnbV5yWVG/rLxAKU8eRkqS7KkrPz82WEVu/mOTHhelKdyOh5Z3yQt5Q7L1tcXLHcOwLaiQj24lSLbRCNq7ExanCyzucER3Nk970/RKwPplAqjWmaHuI3LeA8f6LcweOumYAqoC6xhtVXrjDHc4jyzeinHqQ9ReqbQNoTb0oGPL8CJFcrdy63zIluRdp8Az+kJtVIHHTd0kiPx2HGjhwj4QJOcDSK91ijssss5hogOsz5X2ToI62bbgKAR5S7ms0OD7LB/38Zn1FN5Feuk76EDziHykNbBv8gBf4bdjsAsPKxL2G1IbBXNTSUXDENOGYj2EqAew/gG6TcRfVjw1xN0Z4GTf8w7TxSl47DXOgqpNLTWktPw0kOqQo9yetSje2hmtA/EfaQcudmS/6eAoDywURy1UxmGwHcaVplwNZcuSvM9cWW+Jb/N3Al9QOgNZS7eu87ynXlcyod5lbbwm9898wugHCpK7SCCxgpM43XNnh9DmJhj8/4Usu4AlKo+rQwFCZZo9z71RZAq/WgWr16XHXK3yOI/ZVULwUoAmS0fRL6TP+Q9hKqxdY4veaM1DMq78xE9V2EDDCng2c20B8RSRGLgB7EB5xC506hMmxuUGdtHiUVvgdT5VfuoqpKuSvInYbVClAUNKdaLECLQ1TKvmcDyIOYsBdzgqMhRLcevUQMHIh02pcDzwcESrl3yW5V7hqX1WCrEry+ntf2Kfcu29AQgJVkv/K+l6Hj12DDFrBhW8SnAnATlPsDjHkt0g0Bfql0UMSYXtsMtyGin4SZRE/9bGgkeX4tgBBB2F9l/esHCkCNAqTdlbs4awFjG0mH7UiHB0ifOXGCLwedpX89PirSvh8hLVbDbpUxY/EATFUappIvOla5k8hao8Xez2Sfu0iFKYBK7k8TF34F+0sh9TWjaHiR7WW2w7PRdoIvEOzpXlZuOQ2sowj4elR0Ceidu/CauiDelxupbwEpbKWhqY4YaVA/f4vhncjsiKYA9zSPwlhJBkM2jLYTfIHAyhEXPFLAki8gY4L34WEF0VXFAJMfsMiwi74J8kHeXw1dpH/M+jRmXXGqQQ2OSjDiPphqq3LNUL142D+pDqPqBF9ApBntUn/nwpEAlmmciSYS13yo4V8Ja5VS7vLPMhD9KdWhxG94VMJiU5W7jPNewCnv+5j93I6/JVVhIgy2FvbrQMrNyROc2xkrmEMsXTUS4l2HjCO1hHmk8+uQ0mTqzOOwyRxS5L3YEan8LawlQwgydqgXme+C0F8EGFOV+0ugcRQA+taln0ilx0mbOXWCc3NE1fc1GUvS4QtUb1uwCsrTXlIZ644fQmyfRIT/yPatYR2ZyyXDDHpF4H1UmR+yzy0GaBoZKU+qwibq3N+PyWvhC3nMidgRCWDpXCxjgJupFhNhphrKdeOHKvdOkSZUegKgCrDeHCo8Yb+BsFMpPCttQ7xiHFNS55X8/ahHJzg3692cvLC2epkKTXDNN1LRPP6Wu29kYl5JvKvPYTNZLGIyQBPgzYaxlqCbFKlNqr5kwPMzVsMjgLAfwn6Fchd/9St3oa+c7sTcqLECKgq0ZSxM0xQQ7VTugl2ise6mChRWmcTzxdBdNxj7kXlUT/J3R6rD30idcpXUZD/6J8wSAN9BUqkPdvQrd6J/VJzgCwhzMDlqNJaM48Wje6TDZZD4AQMsW6jalgIasRlmwWLD+T+F/SiYTe5j+4bn9a91ppJCU2E4mTYzKKTc9uIE50bApkWTveI3BPU1yv0hxmbYBQOxDmYq92cuDgM6cd8PUC1uQrALyz1PNfkHKVKGgfLDTjMAWpDj6B9clMLhjHJ/qUGpvOe8R9V3NvXVLKq7NTT5W6bTtEGAFwQUkgrbA45fAEVh3rOSVPozjNWfdJiKoFeG/iqr3JmQ5vigBVXO6zhPNJZeRTfJELXiwo8gNSYBFB8stpEUaK7GO473rSc1JsNiN6OxJLX2YBsR9OOVu9hqXgeUF8RRKVIHNjtWhlb0rUQ76fgegOMYiO+ONyWxm+qwCHbBSYCWgh0hGkrMzz6kxFHK/eWFsyHAspEzUUCdu+qxJ4wVSsUCGJlNugoAmWJ6EqCIQWuJJvsV4D2NDTGNbcfiV20xxOl8wORTf53BYMGVM6H9wAORAla4Dh4R5nl957JopodhPRnmqYx47wtbpeBryZKFR3nf5mgVqzYyF++hHR7IBFShbaRyfw29J2I/Beb6gwpS39LkVzl3942NXBTZLXyWXef3QGPJpD+5B1H/xosM8cjgc31sDA1ic3VlG96FXukn4ox1vrEOu6Ec1aI2OV/li8htXwmGRvPZPo5IFKO690x+/N2lGlfxONcAjfa3JGSO1kCVC+4asXLnTy8x4PVBLzbMmybNIRkVItbLGYxlwZWHxfuFgiuz6cQB7IgaIcez4PIuKlyuwMpO8MtqMjeH8VVseBM6W2xUHk6i9II55Haw2irCt3zbrPTnUkcqmoAllWMJ43g2DXrbv4WyyCaXNbBWUO7GWwEfkajG445oS4USYpzWtMLd8/AZ0mOrlwf2qpPFLL0uRGdZgHkT5orJUcdYcptYaVsZRkS0y/0JR7zWWV4Ba7fKWGjVhvepUOJApFCd0yFrPhSwlWFEongk6TKnQ8YUy4VcSRZc3vSvVOSJyuOpSl517jEe421f5y2B50XIkEKCOndBVstaORstDI0bjFZghTKWrQy9698dyuPJlV4CS24hq2aB5Wnf3sLfydHMWCdtX3tuNehxwjXRrLEkz9ey2srT0D8nZ65kE3XA2h5hfZfX0qAwlswq2RTtVaFEAWVv/fIyTHM0asW7NUm9C33xyuC//FTyGa8/wP8JMABR206VKCmUlQAAAABJRU5ErkJggi8qICB8eEd2MDB8MzlmM2RlNzNmMjA4YTA0MTlkMTg4N2VmNjIxZGQ3YTQgKi8=);  
  16.     background-repeat: no-repeat;  
  17.     _background: none;  
  18.     /* 动画效果 */  
  19.     -webkit-animation: ball-x 3s linear 2s infinite;  
  20.     -moz-animation: ball-x 3s linear 2s infinite;  
  21.     animation: ball-x 3s linear 2s infinite;  
  22.     -webkit-transform-origin: bottom center;  
  23.     -moz-transform-origin: bottom center;  
  24.     transform-origin: bottom center;  
  25. }  
  26. /* 大的蒲公英样式 */  
  27. .dandelion .bigdan {  
  28.     width: 64px;  
  29.     height: 115px;  
  30.     left: 41px;  
  31.     background-position: -86px -36px;  
  32.     border: 0px solid #fff;  
  33. }  
  34. /* 小的蒲公英样式 */  
  35. .dandelion .smalldan {  
  36.     width: 36px;  
  37.     height: 60px;  
  38.     left: 88px;     
  39.     background-position: 0 -90px;  
  40.     border: 0px solid #fff;  
  41. }  
  42. /* 以下是动画效果 */  
  43. @keyframes ball-x {  
  44.     0% { transform:rotate(0deg);}  
  45.     25% { transform:rotate(5deg); }  
  46.     50% { transform:rotate(0deg);}  
  47.     75% { transform:rotate(-5deg);}  
  48.     100% { transform:rotate(0deg);}    
  49. }  
  50. @-webkit-keyframes ball-x {  
  51.     0% { -webkit-transform:rotate(0deg);}  
  52.     25% { -webkit-transform:rotate(5deg); }  
  53.     50% { -webkit-transform:rotate(0deg);}  
  54.     75% { -webkit-transform:rotate(-5deg);}  
  55.     100% { -webkit-transform:rotate(0deg);}  
  56. }  
  57. @-moz-keyframes ball-x {  
  58.     0% { -moz-transform:rotate(0deg);}  
  59.     25% { -moz-transform:rotate(5deg); }  
  60.     50% { -moz-transform:rotate(0deg);}  
  61.     75% { -moz-transform:rotate(-5deg);}  
  62.     100% { -moz-transform:rotate(0deg);}  
  63. }  
  64. </style>  

页面鼠标点击特效

效果嘛……你在本页不断点击鼠标左键就能看到了(千万别上瘾哦~)

实现的方法很简单,还是老套路,在页面的任意位置加入如下代码即可(需要引入 jQuery)

  1. <script>  
  2. jQuery(document).ready(function($) {   
  3.     $("html,body").click(function(e){   
  4. var dfs=[  
  5. "您刚才的点击使计生局放开了"+Math.floor(Math.random()*100)+"胎政策。",  
  6. "您刚才的点击使黄石超级火山爆发了",  
  7. "您刚才的点击使罗辑又换了一个女朋友",  
  8. "您刚才的点击使小米公司收购了高通公司",  
  9. "您刚才的点击引爆了"+Math.random()*10000+"光年外的一颗恒星",  
  10. "您刚才的点击使头发变得乌黑浓密了",  
  11. "您刚才的点击使您的波函数坍塌了",   
  12. "您刚才的点击使您的银行卡被盗刷了",   
  13. "您刚才的点击使普朗克常数扩大了十倍",   
  14. "您刚才的点击熄灭了蓝色空间号二号主引擎",   
  15. "您刚才的点击创造了一个小宇宙",   
  16. "您刚才的点击使宇宙由开放转为闭合",   
  17. "您刚才的点击让云天明和关一帆在一起了",  
  18. "您刚才的点击使三体第"+Math.floor(Math.random()*100)+"舰队起航了",   
  19. "您刚才的点击使第"+Math.floor(Math.random()*10000)+"号宇宙毁灭了",   
  20. "您刚才的点击向太阳发射了一颗光粒",   
  21. "您刚才的点击导致三体行星撞上他的主星",  
  22. "您刚才的点击令人类文明将在"+(new Date()).getFullYear()+"年"+((new Date()).getMonth()+1)+"月"+(new Date()).getUTCDate()+"日23:59:59毁灭",  
  23. "您刚才的点击启动了威慑系统",  
  24. "您刚才的点击使谢顿计划脱离了正轨",  
  25. "您刚才的点击使程心按下了威慑开关",  
  26. "您刚才的点击引起了"+Math.random()*10000+"光年外一个行星的爆炸",  
  27. "您刚才的点击使宇宙中产生了一些暗物质",  
  28. "您刚才的点击引起了所有行星上的地震",  
  29. "您刚才的点击使一台诺基亚摔碎了",  
  30. "您刚才的点击使360云盘倒闭了",  
  31. "您刚才的点击小米发布了MIX概念手机",  
  32. "千万不要再次点击鼠标",  
  33. "真的千万不要再次点击鼠标"
  34.         ];  
  35. var n=Math.floor(Math.random() * dfs.length + 1)-1;   //随机获取一条数据
  36. var $i=$("<p/>").text(dfs[n]);      //新建一个b标签,并显示随机的话语
  37. var x=e.pageX,y=e.pageY;            //获取鼠标点击的x,和y
  38.         $i.css({                            //为标签赋予css值
  39. "z-index":99999,   
  40. "top":y-20,   
  41. "left":x,   
  42. "position":"absolute",   
  43. "color":"#E94F06",  
  44. "font-family":"微软雅黑",  
  45. "cursor":"default",  
  46. "-moz-user-select": "none",  
  47. "-webkit-user-select": "none",  
  48. "-ms-user-select": "none",  
  49. "-khtml-user-select": "none",  
  50. "user-select": "none",  
  51.         });   
  52.         $("body").append($i);               //在尾部插入
  53.         $i.animate( {"top":y-180,"opacity":0}, 1500, function(){$i.remove();});     //动画消除
  54.         e.stopPropagation();  
  55.     });  
  56. });   
  57. </script>  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你...

18210
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

1342
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

602
来自专栏小狼的世界

YUI3 CSS框架学习

改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构...

903
来自专栏移动端开发

屏幕方向该知道的那些事儿

前言     这两天在学关于屏幕旋转的相关的知识,也延伸出了加速器和陀螺仪这些以前没有深入去学习过的知识点,在没有仔细看之前也有一些问题在想,比如;用户关闭了手...

24310
来自专栏阮一峰的网络日志

CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架---...

2754
来自专栏分布式系统和大数据处理

Web标准中的常见问题

大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使...

705
来自专栏企鹅号快讯

程序猿必备的10款web前端动画插件三

1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画,并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文...

1858
来自专栏葬爱家族

Android高级动画(4)完结篇目录回顾封装库总结

Android高级动画(1)http://www.jianshu.com/p/48554844a2db Android高级动画(2)http://www.ji...

732
来自专栏服务端技术杂谈

双管齐下:同时设计 iOS 和 Anroid

不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和...

3225

扫码关注云+社区