點選頁面出現富強民主這類文字動畫效果

點選本頁面任意位置即可！因為動畫效果用的是css3animation，因此，ie9及其以下瀏覽器無效果。

1. 複製並貼上下面的內聯css**到頁面任意位置

2. 複製下面的內聯js**到頁面任意位置

就有效果了！

當然，你也可以把css和js**片段分別內嵌到自己的css檔案和js檔案中。

dom時間的event物件中有個pagex和pagey可以獲取到點選事件發生時候事件發生源相對於頁面左上角的水平距離和垂直距離。對於滑鼠點選事件，則對應滑鼠相對於頁面左上角的距離，因此，我們只要把文字內容定位到這個點選位置偏上一點位置就可以了。

然後，配合css3animation，寫乙個往上淡出效果就可以了。

當文字元素插入到頁面的時候，動畫會自動執行。

為了防止文字元素不斷建立，占用不必要的資源，我們可以借助animationend事件實現動畫結束的時候自動刪除建立的文字元素。

ele.addeventlistener('
animationend
', function () );

語法如下：

fntextpopup(arr);

其中，arr表示依次要顯示的文字內容陣列。

fntextpopup(['蔡徐坤我愛你', '范丞丞你最棒', '請pick楊超越', '王菊加油', '吳宣儀你最美']);

如果想要修改tips文字的顏色，字型等樣式效果，修改css**中.text-popup類名對應的css屬性即可！

如果想要加入ie8瀏覽器，可以按照上面實現邏輯，改成jquery的語法，然後，動畫可以使用jquery的animate()方法，這裡不展示。

另外，移動端沒測試，如果沒效果，試試document.documentelement改成document.body。

本文幾乎沒有深度，但是，有價值，一些**剛入門的小朋友就需要這些東西，節約了別人的時間，幫助了別人實現功能，是件有價值的事情，因此，值得花時間記錄下來。而且，以後，說不定自己也要用到這個效果，也可以節約自己的時間，一舉兩得。

寫作這事吧，也隨緣，別總想著幫到所有人，沒必要那麼功利，只要不誤人，有價值，我覺得都是值得鼓勵的。

點選頁面出現富強 民主這類文字動畫效果