無限個網站使用同一微信公眾號授權登錄方案
在網站開發中，我們經常會用到微信公眾號的授權登錄，需要在不同網站中多次對接微信公眾號登錄代碼，並且微信公眾號還限制只能設置兩個授權回調地址，實現起來比較麻煩，今天我們提供一個可以完美解決多網站授權登錄的方案，不限制網站數量。 以下操作都是基於檸聚開發者平台來進行的，檸聚開發者平台是一個聚合開發平台，內置了很多開發中經常用到的實用功能。 首先登錄開發者平台：https://console.21ds.
昵称 千龍
动态
純CSS實現炫酷文本陰影效果
如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。 基於以上動圖可以分析出以下是本次實現的主要幾個功能點： 文本有多個顏色的陰影的效果 文本有空心鏤空的效果 鼠標懸停時文本回到正常效果 鼠標懸停時英文字體的粗細有變化 實現過程 多層顏色陰影 文字的陰影用text-shadow實現，但
昵称 南城FE
純CSS動態漸變文本特效
如圖所示，這是一個炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，瞭解其實現原理。 基於以上動圖效果可以分析以下是本次動效實現的主要幾點： 文本中有多個顏色的動畫 每個顏色顯示的半徑不同，有大有小 整體動畫是有規律的重複進行着 實現過程 接下來開始正式的代碼實現過程，通過以上可以分析出會有多個元素來實現顏色的動畫，每個元素的動畫軌跡和運行速度不一致，但當多個不同顏
昵称 南城FE
CSS技巧：從高度0過渡到自動高度
本文翻譯自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere， 略有刪改。 如果你在CSS上花了足夠長的時間，很可能你曾嘗試過從height:0到auto的平滑過渡。。。卻發現它不起作用！😢 ️幸運的是現在有一個解決這個問題的方法：使用CSS Grid佈局可以解決這個問題，而且代碼簡單，運行的很完美。 讓我們從一個實
昵称 南城FE
炫酷鼠標懸停隨機漸變文本動畫效果
如圖所示，這是一個很炫酷的鼠標懸停動畫效果，卡片的文字隨着鼠標的移動不斷變化着，且文字的顏色伴隨着漸變色跟隨鼠標移動，中心部分是突出的LOGO效果，整個交互效果十分引人注目。原效果來源於 evervault.com/customers 這個網站，有興趣的可以體驗看看～ 本次文章將解析如何用代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 卡片在鼠標懸停時出現漸變隨機文字
昵称 南城FE
生成式 AI 如何重塑動畫的景觀？
介紹 動畫一直是一種迷人的藝術形式，通過運動的魔力將角色和故事帶入生活。多年來，技術進步徹底改變了動畫行業，現在，生成式人工智能正在成為中心舞台。生成式人工智能是指使用人工智能算法來創建原創和獨特的內容。在動畫領域，這項技術正在重塑景觀，提供新的可能性並突破創造力的界限。 瞭解動畫中的生成式 AI 動畫中的生成式 AI 涉及使用算法和機器學習技術自主生成內容。這些算法在大量數據上進行訓練，
昵称 Momodel
圖撲這樣設計高質量可視化大屏
5 大指南塑造高階可視化 5 Guidelines to Shape Advanced Visualization · 可視化是個友好的媒介 · ·理解數據是成為優秀媒介的關鍵 · · 業務驅動下的設計策略· · 圖撲設計的無限可能 · · 創新思維讓可視化更具價值 · 可視化是個友好的媒介 我們正處於一個數據氾濫的時代，隨處可見數據的身影，更知其不可忽視的重要性。企業運營產生的海量數據，若僅停留
昵称 hightopo
高級 SwiftUI 動畫 — Part 3：AnimatableModifier
前言 之前的兩篇文章animating paths和transform matrices 對 Animatable 協議使用做了介紹，今天這篇文章將為大家介紹 AnimatableModifier，使用它可以完成更多的動畫工作。 AnimatableModifier 是一個 ViewModifier，符合 Animatable 協議，如果對這個協議不瞭解可以閲讀之前發佈的兩篇文章。 Animata
昵称 Swift社區
螺旋文字滾動特效源碼解析
如圖所示，今天看到一個很炫酷的雙文字螺旋滾動特效，兩行文字呈螺旋狀變化，在網站中這樣的效果對用户很有吸引力。本文將基於原網站解析如何實現這個炫酷的效果，基於這個動圖可以分析出需要實現的要點： 文字呈螺旋狀滾動 滾動過程中文字大小變化 動畫過程無縫鏈接 兩行文字滾動 實現過程 文字展示 為了方便更改文案將文案定義變量，通過JS代碼動態創建DOM，定義文案、螺旋的角度以及動畫的持續時間：
昵称 南城FE
CSS螢火蟲按鈕特效
如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事
昵称 南城FE
CSS炫酷光暈按鈕特效
如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line
昵称 南城FE
純CSS實現有趣emoji切換開關
這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實
昵称 南城FE
利用 XState(有限狀態機) 編寫易於變更的代碼
目前來説，無論是 to c 業務,還是 to b 業務，對於前端開發者的要求越來越高，各種絢麗的視覺效果，複雜的業務邏輯層出不窮。針對於業務邏輯而言，貫穿後端業務和前端交互都有一個關鍵點 —— 狀態轉換。 當然了，這種代碼實現本身並不複雜，真正的難點在於如何快速的進行代碼的修改。 在實際開發項目的過程中，ETC 原則，即 Easier To Change，易於變更是非常重要的。為什麼解耦很好？ 為
昵称 jump__jump
前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged
整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format
昵称 solvep
[譯] 如何使用 useRef 修復 React 性能問題
原文地址：How to useRef to Fix React Performance Issues 原文作者：Sidney Alcantara 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc
昵称 彈鐵蛋同學
vue移動端項目骨架屏的實現
Vue應用加載過程 我們先來看看vue的入口文件index.html裏面的內容， !DOCTYPE html html lang="en" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=de
昵称 familyAboveAll
石火電光追風逐日|前端優化之次時代圖片壓縮格式WebP的項目級躬身實踐(Python3 PIL+Nginx)
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_190 我們知道，在前端界有一個共識：速度就是生命，帶寬就是金錢。怎樣將頁面加載速度有效提升是無數前端工程師無時不刻在思考的課題，目前的網絡環境中，除了視頻，圖片仍舊是佔用流量較大的一部分，對於app端尤其如此，因此，如何在保證圖片視覺不失真的前提下縮小圖片體積，對於節省帶寬和電池電量都十分重要，因此Google在十年前提出了一種
昵称 劉悦的技術博客
前端進階（1）Web前端性能優化
前端進階（1）Web前端性能優化 Web前端性能優化, 不僅能夠改善站點的用户體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。 1. 服務器優化 1.1. 使用內容分發網絡（CDN） 把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。 1.2. 服務器使用http2.0協議 Htt
昵称 Jack_N
WebSocket 對象簡介
WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。 何為 WebSocket 對象？ WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。 WebSocket 對
昵称 編程三昧
前端性能優化總結
本文將記錄我所掌握的全部整套前端性能優化模型 http協議層面 http協議緩存（應用緩存，瀏覽器默認緩存，自定義瀏覽器緩存，代理服務器緩存，服務器緩存） gzip壓縮 chrome併發6個請求 使用loading優化請求中的體驗 預加載 PreloadJS （瀏覽器緩存） 工程化 圖片base64 代碼切割 按需加載 BundleAnalyzerPlugin 靜態分離，第
昵称 張儀ranck
打造一套客户端功能最全的 APM 監控系統
APM 是 Application Performance Monitoring 的縮寫，監視和管理軟件應用程序的性能和可用性。應用性能管理對一個應用的持續穩定運行至關重要。所以這篇文章就從一個 iOS App 的性能管理的緯度談談如何精確監控以及數據如何上報等技術點 App 的性能問題是影響用户體驗的重要因素之一。性能問題主要包含：Crash、網絡請求錯誤或者超時、UI 響應速度慢、主線程卡頓、
昵称 杭城小劉
從頁面加載到數據請求，前端頁面性能優化實踐分享
背景 做過前端開發都知道前端的工作內容是很多的，對於HTML、CSS、Javascript、Image、Flash等各種內容的使用。為了更好提升應用的性能，我們需要對各種資源內容進行不同方面的優化。 對用户而言，優化可以讓應用的響應速度加快，加載更加迅速，可以帶來更好的使用體驗。 對於服務商而言，前端優化能夠減少頁面請求數量，寬帶所佔帶寬，有效的節省資源。 前端優化的內容很多，按照粒度等級劃
昵称 葡萄城技術團隊
【客户端建設及調優實踐】
“音視頻+無限可能” 是一扇LiveVideoStackCon面向新興領域開啓的大門，在移動互聯網紅利消失、內卷的局面下，智能車、製造、金融、醫療、出海等新興領域還在迫切追尋新技術帶來的增值。在“音視頻+無限可能” ，提前看到新機會、新案例、新實踐。 4月15日-16日，LiveVideoStackCon 2022 音視頻技術大會 上海站，和你一同開啓通向未來的大門。 客户端建設及調優實踐 軟/硬
昵称 LiveVideoStack
【包真】我的第一次webpack優化，首屏渲染從9s到1s
大家好，我是貓小白，本文基於vue2，全文閲讀大約需要3分鐘。 談到webpack優化大部分人可能都看膩了，無非就那幾招嘛，我之前也是看過許多類似的文章，但都沒有自己真正上手過，下面是我用公司的項目真實操練下來的，首屏加載速度提升很大（刷刷的），希望能幫到你。 廢話不多説，先看看對比成果！ 類型 優化前 優化後 js文件大小
昵称 華仔