Posts

收款啦 收款啦，是一款整合支付寶、微信、QQ收款碼的三合一系統。 採用 thinkPHP5.0 + MySQL + layui 開發完成 演示網站：收款啦 專案地址：GitHub 前言 無論是教學還是現成的程式碼，網路上幾乎隨處可見，為什麼我還要自己寫一套呢？ 就是為了體現「套」字，包含上傳二維碼、識別二維碼、生成三合一收款碼，一整套流程服務。 絕大多數的三合一僅針對個人使用，而收款啦能為多用戶提供三合一服務。 但是它卻沒有後台，主要原因有兩個： 無需頻繁查看或修改配置，一次配置，終身使用。 作者懶癌發作（也導致沒有安裝嚮導） 如果確實需要，之後再說 程式碼本身是比較輕量級的，由於使用了框架導致體積增大。 好吧，本身也沒什麼技術含量，自己也幾乎用不到，寫給有需要的人類吧，順便水水文~~逃(- 原理 收款碼三合一，聽起來感覺很神奇，其實原理非常簡單！ 所謂二維碼，其實就是包含了一系列字串的圖片罷了。無論是支付寶還是微信的收款碼，其本質上是一個包含了收款連結的二維碼。所以我們的思路是：檢測如果是支付寶瀏覽頁面，就給出支付寶的付款連結；如果是微信，就給出微信連結…… 然後這裡涉及到一個知識點，User-Agent，大廠的webview都會攜帶自家的UA資訊，比如說： QQ：MQQBrowser/6.2 TBS/043221 Safari/537.36 QQ/7.0.0.3135 微信：MQQBrowser/6.2 TBS 043220 Safari/537.36 MicroMessenger/6.5.8.1060 NetType/4G Language/zh_CN 支付寶：UCBrowser/11.5.0.939 UCBS/2.10.1.6 Mobile Safari/537.36 AliApp(AP/10.0.15.051805) AlipayClient/10.0.15.051805 Language/zh-Hans 這樣就很輕鬆區分是QQ還是微信還是支付寶掃碼了： User-Agent 含有 QQ/ 為QQ User-Agent 含有 MicroMessenger 為微信 User-Agent 含有 AlipayClient 為支付寶 既然能夠區分每個軟體，那就可以透過自建一個網址，透過二維碼生成掃描這個網址後，判斷瀏覽器的UA，來分發不同的收款碼。 大致的流程則為： 客戶端掃碼 -> 伺服器端根據 User-Agent 判斷客戶端類型 -> 分別返回不同的處理 另外值得注意的是： QQ：https 協定，無法喚醒QQ 支付寶：https 協定，可直接喚醒支付寶 APP ...

這裡應該是一張大的背景圖片 圖片上有七夕的祝福語 (空格空格)這裡應該是祝福語和活動開頭!~! 活動主題：這個位置是活動主題 (七夕總得送點啥) 活動時間：活動時間 (就這一兩天吧) 活動內容：這裡是介紹活動和七夕，還有福利 (Pixiv 1-10000 id 的圖包，共5.93G，一萬張，極大可能包含不可描述的內容) 然後我們看一下去年的活動 七夕-我來送對象了-快樂 最後說一下想說的話吧. 想找個人送個情人節禮物才發現沒有合適的….. 情人節沒啥送的.發對象是發不了.自己都木有..實在不行大家自己new一個 沒別的就是送點圖包 批註： 本文章內容需要自行腦補.把這篇文章想成特別美,特別高端的樣子,謝謝 .down_link{background:url(‘https://www.52ecy.cn/content/uploadfile/201707/md-bg.jpeg') no-repeat 100% 0% #fffdff; border: 1px solid #faf8fb; border-radius: 2px; color: #666; font-size: 14px; margin-bottom: 10px; padding: 5px 20px;}.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downlink a{text-decoration:none;} .downlink a{text-decoration:none;font-size:15px;} .downlink a:link{color: #ffffff;} .downlink a:visited{color: #ffffff;} .downlink a:hover{color: #ffffff;} .downlink a:active{color: #ffffff;} .downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .yanshibtn{background: none repeat scroll 0 0 #d33431; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downbtn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .downbtn a:hover,.yanshibtn a:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} ...

如果說，有一份遲早會消失的愛情擺在你的面前，你還會為之努力嗎？ 很多人說，世界上沒有人會為了分手而戀愛的。 但是，他們錯了。 因為，愛情的迷人之處，大概就在於深陷其中，無法自控吧…… 一年又一年，因為他的存在，每個夏天都像盛大的祭典。陽光明媚，溪水淙淙，蟬鳴，樹蔭，冰棍，西瓜，繞著大樹追逐嬉笑，躺在草地上小憩….. 和他在一起時，再無聊不過的事情也變得有趣，再漫長的時間也轉瞬即逝。女孩像期待祭典般一次又一次期待夏天的來臨，一次又一次希望夏天永不結束。所以她哭著和他約定—— 不論發生什麼事，你都不可以碰我喔！ 女孩知道，時間總有一天會將他們分開。所以，她害怕再也見不到面具下那雙明亮的眼睛，害怕再也見不到蝴蝶落在面具上時他微笑的側臉，害怕再也見不到他們嬉戲時他笨拙的模樣，害怕再也見不到他…… 螢，我終於可以擁抱你了！ 而女孩，早已感動不已，熱淚盈眶，撲入那個她曾一直渴望的懷抱，在螢火之中，感受著短暫的、第一次也是最後一次的擁抱。 每個人心裡都有一個螢火之森，就像童話故事一般，當你漸漸長大之時，它就會像銀那樣破碎，如螢火般飛散，而這就是成長的代價。 愛情，總是充滿遺憾的。或許，這就是愛情美好的所在，而螢火，微弱、迷茫、神秘，也就象徵著那無法見光、稍縱即逝的戀愛。

聽說只有聰明人才能看到這句話，密碼在文章標題後面 生命短暫，世界很大。 小飛機助手，它是一款基於S*h·a·d·o·w·s·o·c·k·s的VPN代理軟體助手，它內建多個節點，可用率高達80%，可一鍵翻`越`長`城`防`火`牆，達到科`學`上`網`的目的。 先聲明 在某個漆黑風高、風雨交加的夜晚，身為碼農的某部落客，經常需要上網搜尋資料和學習，故國內度娘對英文搜尋欠佳，則需上谷`歌，又故國內大陸地區無法直接訪問谷`歌，則迫於無奈只能掛上梯`子，爬出長`城`防`火`牆 該軟體為免費軟體，請勿盜賣！ 該軟體僅用於學習與交流，請不要用於違法用途 任何人使用該軟體的任何行為均與作者無關，本人有權不承擔任何法律責任！ 環境 需要安裝 .NET Framework 4.6.2 和 Microsoft Visual C++ 2015 Redistributable (x86) 基本使用 雙擊小飛機助手運行後將自動釋放內建的 S·h·a·d·o·w·s·o·c·k·s 版本（注意殺軟） 小飛機助手預設使用的是高可用模式，當然你也可以切換模式，或者選擇你喜歡的節點 選擇 啟用系統代理 來啟用系統代理。請禁用瀏覽器裡的代理外掛程式，或把它們設定為使用系統代理。 伺服器自由切換 負載平衡：隨機選擇伺服器 高可用：根據延遲和丟包率自動選擇伺服器 累計丟包率：透過定時 ping 來測速和選擇。如果要使用本功能，請打開選單裡的`統計可用性`。 也可以實現 IStrategy 介面來自訂切換規則，然後給我們發一個 pull request。 如果目前節點不可用請自行嘗試切換節點 殺軟可能報毒，請新增信任，如不放心，請在虛擬機器中運行 哈勃報告：https://habo.qq.com/file/showdetail?pk=AD0GYV1oB2UIP1s9#pephoto .down_link{background:url(‘https://www.52ecy.cn/content/uploadfile/201707/md-bg.jpeg') no-repeat 100% 0% #fffdff; border: 1px solid #faf8fb; border-radius: 2px; color: #666; font-size: 14px; margin-bottom: 10px; padding: 5px 20px;}.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downlink a{text-decoration:none;} .downlink a{text-decoration:none;font-size:15px;} .downlink a:link{color: #ffffff;} .downlink a:visited{color: #ffffff;} .downlink a:hover{color: #ffffff;} .downlink a:active{color: #ffffff;} .downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .yanshibtn{background: none repeat scroll 0 0 #d33431; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downbtn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .downbtn a:hover,.yanshibtn a:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} ...

Woothosting 於 2019 年 4 月 1 日被收購，請不要再購買了（連結如下）騰訊雲伺服器安全可靠高性能，多種配置供您選擇 我的伺服器就是在上面買的，所以強烈推薦一波。 買個 3.99 美元一年搭建個酸酸乳也是爽歪歪的(不會搭建可以來找我喔) 溫馨提示： 註冊的時候不要使用 QQ 郵箱註冊 服務商是美國的，白天發工單，他們那邊晚上下班，所以不會回覆 機器名字用 server 就會自動開通。其他名字可能會手動開通。 VPS: OpenVZ CPU 記憶體 硬碟 流量 埠 年付（點擊購買） 1 96M 5G 250G 100M 3.99刀 1 192M 10G 1T 100M 5刀 1 0.5G 15G 1.5T 100M 6刀 1 1G 20G 2T 100M 6刀 1 0.5G 20G 1.5T 1000M 8刀 1 1G 25G 2.5T 100M 8刀 1 1G 30G 2T 100M 9刀 1 1G 40G 3T 100M 9刀 2 1G 25G 3T ...

兩個月的傾情之作，萌音社區它來了~ 作為新一代開放性的二次元交流社群，圖片、影片、聲音，甚至是黑科技等，在允許的範圍內，你幾乎可以發佈任何內容….. 幻想領域走了，萌音社區來了！各種女裝大佬，基佬百合，咦咦咦小蘿莉，找緩♀交，聊哲♂學，應有盡有，自古紅藍出CP，不是百合就是基。快來和我們簽訂契約吧~~ 萌音社區,一個超好玩的ACGN二次元交流社群,一個充滿愛與和諧的二次元社群,新番舊番,日漫美圖,福利動漫,MMD等ACGN資源應有盡有.一起吐槽刷彈幕,尋找cosplay同好,還可以與大家分享二次元宅的日常,進入二次元的精彩世界 主站點 www.moeins.com 備用站點 www.moeins.cn # 關於建立這個社群的目的呢 其實沒什麼目的，就是想要有那麼一個屬於自己的二次元社群，然後一群喜歡二次元的小夥伴在裡頭瞎聊點什麼的，比如我老婆漂亮還是你老婆漂亮之類的，然後它就為此而誕生了。 萌音社區它不一定能成功，但我們一定會用心把它做好。 反正也就多續費個網域，目前託管在由齊樂分享提供的洛杉磯機房，因為網域沒備案嘛 # 萌音社區的誕生歸功於以下專案 thinkPHP layui fly Onedrive layuiCMS 2.0 video.js jQuery 向以上大佬們致敬！ # 按慣例，放圖

自從我率先使用微博的雲儲存作為二次元隨機API的圖片儲存庫後，網上便延伸出許多類似的二次元隨機API，在我所知的這些中挑選了幾個訪問看了下，發現許多圖片都相當眼熟。並且圖片連結也能在我資料庫中找到，這不就是我上傳的嗎？ 難道他們都是採集我的嗎？ 當然口說無憑，需要依據 然後選取了我已知的十個API接口，均為儲存在新浪圖床的二次元API。掛在伺服器上採集了一早上，採集了差不多10萬張，經過篩選重複無效的後僅剩一萬張左右。令人詫異，說明十個接口數據基本相同 接著透過程式分析出連結的上傳者，在這一萬張中，有75%的圖片均來自幻想領域圖床 雖然透過新浪圖片地址識別出新浪用戶已經不是什麼秘密了 線上演示地址 這個是js版本的，程式碼可直接右鍵獲取 透過識別可發現，API中的大量圖片均來自幻想領域圖床微博上傳，也就是我自個上傳的，那些所謂的API是不是盜版我的，自己心裡有數 原理揭秘： 由於現在註冊的微博帳號uid都很大，上傳的圖片基本都是007開頭的，所以下面這張圖片是我隨便在微博上挑了個老號複製過來的 連結為 https://wxt.sinaimg.cn/thumb300/9d0d09ably1fsn7m0jyzzj20m80cidgm.jpg 的圖 提取檔名 9d0d09ably1fsn7m0jyzzj20m80cidgm，前 8 位 9d0d09ab用 16 進制轉換下變為 2634877355，就是用戶 uid 然後拼接上微博用戶主頁地址:https://weibo.com/u/+uid 如果出現是 這種 http://wx1.sinaimg.cn/mw690/0072Vf1pgy1foxkfv4t7bj31hc0u018w.jpg ，005、006、007 開頭的這種就用 62 進制轉 至於為什麼出現這個應該是發現 8 位 16 進制存不下了。 https://weibo.com/u/6456124939

繼上一次之後，我抽空整理了一份比較完整的 Git 常用命令清單，並找到了一張非常棒、非常高清的導圖（1759*3162）。 查看、新增、提交、刪除、找回、重置修改檔案 git help <command> # 顯示 command 的說明 git show # 顯示某次提交的內容 git show $id git co -- <file> # 捨棄工作區修改 git co . # 捨棄工作區修改 git add <file> # 將工作檔案修改提交到本地暫存區 git add . # 將所有修改過的工作檔案提交暫存區 git rm <file> # 從版本庫中刪除檔案 git rm <file> --cached # 從版本庫中刪除檔案，但不刪除檔案 git reset <file> # 從暫存區恢復到工作檔案 git reset -- . # 從暫存區恢復到工作檔案 git reset --hard # 恢復最近一次提交過的狀態，即放棄上次提交後的所有本次修改 git ci <file> git ci . git ci -a # 將 git add, git rm 和 git ci 等操作都合併在一起執行 git ci -am "some comments" ...

最近看到不少人部落格都發了關於網頁抓包的教學，然後也激起了我的興(zhuang)趣(bi)，就誕生了這篇文章 也剛好前段時間，我的歌單對接酷狗的API失效了，趁機修復一下，順便寫個圖文教學。那麼就拿酷狗「開刀」 關於抓包的概念 抓包（packet capture）就是將網路傳輸發送與接收的資料包進行截獲、重發、編輯、轉存等操作，也用來檢查網路安全。抓包也經常被用來進行資料截取等。 ——來自基佬百科 我們這裡講的是對網頁傳輸的資料進行截取，並不涉及重發、編輯等影響網路安全的操作。 其實關於抓包的文章，我早在16年的時候就已經發布了多篇，但是由於文章年久失修，圖片有的丟失，有的損壞，順序也全亂了。 抓包對於做WEB開發的人來說，可能會比較陌生，尤其是後端，但我是做桌面應用程式出身的，使用起來就得心應手。 目的： 解析酷狗歌曲直鏈 - 修復我的歌單 目標網站： http://t.kugou.com/1md5hf5t8V2 酷狗我的歌單分享短網址 使用工具： Google Chrome F12（或 Ctrl + Shift + I、或直接 點擊右鍵>檢查元素）開發人員工具 （注意以下教學請結合圖片觀看，看不清楚的請右鍵新視窗開啟圖片） 然後我這裡抓的是手機版頁面，因為電腦版整個歌單的列表是直接返回到原始碼中，不方便我們解析。手機版則是返回JSON。 Preserve Log：作用是在頁面跳轉後保留之前的日誌 左上角的手機標誌：切換當前瀏覽介面的UA為手機UA 輸入網址後按Enter鍵訪問，網頁發生跳轉 狀態碼302，得到重定向位址（務必看圖片，文字描述被精簡） 抓包就到此結束，下面開始分析： 可以確定的是酷狗網站的音樂連結絕對不是固定的 以以往的經驗來說，這都是可疑參數 在抓包日誌中尋尋覓覓，得到整個歌單列表的獲取方法 list。並且包含歌曲的基礎資訊。 分析 list 連結，就很明顯，這裡的參數和之前的很像 接下來就是分析每一首歌曲的連結 歌曲直鏈的有效期差不多為24小時左右，就會失效了 繼續查看抓包日誌 帶上歌曲的hash值即可獲取到歌曲的相關資訊和直鏈（hash值在前邊的歌曲列表中已經返回了） 總結： 短網址 -> 網頁連結參數 -> 獲取歌單列表 -> 獲取歌曲 （循序漸進，把上一步得到的參數帶上訪問下一個網址） 相關的程式碼自己去寫吧….-。- 很久沒發這種很教學性的文章了。 最後說一句，Google 開發人員工具真特喵好用！ 隨便寫寫，溜~~ 相關推薦 （1）使用PHP抓取Bing每日圖像並為己所用.孟坤部落格. （2）抓包入門（一） 相關程式碼 （1）酷狗歌單獲取歌曲資訊的介面原始碼

CSS3 隨機背景圖片淡入淡出切換特效 演示效果如本篇文章背景所示 看大家扒我的幻想領域二次元限定版扒得比較累，扒了大半個小時的，抽空整理一下發出來 設計之初本來是打算使用 jQuery 進行實現的，但是注意到了 CSS3 的 @keyframes 規則，CSS3 已經強大到曾經只有 JS 才能實現的效果 定義和用法 透過 @keyframes 規則，您能夠建立動畫。 建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。 在動畫過程中，您能夠多次改變這套 CSS 樣式。 以百分比來規定改變發生的時間，或者透過關鍵詞 “from” 和 “to”，等價於 0% 和 100%。 0% 是動畫的開始時間，100% 是動畫的結束時間。 為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。 註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。 核心 CSS 部分 (記得切換圖片地址) body { background: #000; background-attachment: fixed; word-wrap: break-word; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat } ul { list-style: none } .cb-slideshow li:nth-child(1) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099) } .cb-slideshow li:nth-child(2) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159) } .cb-slideshow li:nth-child(3) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149) } .cb-slideshow li:nth-child(4) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139) } .cb-slideshow li:nth-child(5) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129) } .cb-slideshow li:nth-child(6) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119) } .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2 } .cb-slideshow:after { content: '' } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: -2; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s } .cb-slideshow li:nth-child(2) span { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s } .cb-slideshow li:nth-child(3) span { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s } .cb-slideshow li:nth-child(4) span { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s } .cb-slideshow li:nth-child(5) span { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s } .cb-slideshow li:nth-child(6) span { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out } 17% { opacity: 1; -webkit-transform: scale(1.1) rotate(0) } 25% { opacity: 0; -webkit-transform: scale(1.1) rotate(0) } 100% { opacity: 0 } } 當然還是需要配合 HTML 程式碼的 HTML 部分 (其中的文字部分和 <li> 的數量是可以隨意更改的) ...