tag css3

標籤
貢獻98
158
05:52 PM · Oct 25 ,2025
nanchengfe 頭像 tuzixiansen_63d4d65909d62 頭像 zhuifengdekukafei 頭像 dmitry-dragilev 頭像 linyuyizhizou_678b9fdc436f1 頭像 vitaly-friedman 頭像 jsliang 頭像 kestrel_task 頭像 bianchengsanmei 頭像 hui_61e3b3803b922 頭像 gqkmiss 頭像 louis-lazaris 頭像

@css3 / 博客 RSS 訂閱

nanchengfe 頭像

南城FE - 純CSS實現炫酷文本陰影效果

如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。 基於以上動圖可以分析出以下是本次實現的主要幾個功能點： 文本有多個顏色的陰影的效果 文本有空心鏤空的效果 鼠標懸停時文本回到正常效果 鼠標懸停時英文字體的粗細有變化 實現過程 多層顏色陰影 文字的陰影用text-shadow實現，但

css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS動態漸變文本特效

如圖所示，這是一個炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，瞭解其實現原理。 基於以上動圖效果可以分析以下是本次動效實現的主要幾點： 文本中有多個顏色的動畫 每個顏色顯示的半徑不同，有大有小 整體動畫是有規律的重複進行着 實現過程 接下來開始正式的代碼實現過程，通過以上可以分析出會有多個元素來實現顏色的動畫，每個元素的動畫軌跡和運行速度不一致，但當多個不同顏

css3 , 動畫 , Css , 程序員 , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS技巧：從高度0過渡到自動高度

本文翻譯自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere， 略有刪改。 如果你在CSS上花了足夠長的時間，很可能你曾嘗試過從height:0到auto的平滑過渡。。。卻發現它不起作用！😢 ️幸運的是現在有一個解決這個問題的方法：使用CSS Grid佈局可以解決這個問題，而且代碼簡單，運行的很完美。 讓我們從一個實

css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現炫酷背景霓虹燈文字效果

如圖所示，這是一個很炫酷的霓虹燈文字效果且背景炫酷，就像很多個燈光閃爍着不同的顏色。 本次文章將解析如何用CSS代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 整個背景中有平均分佈的小點襯托中心區域 文字閃爍效果如同霓虹燈一樣 文字背景呈多個平均分佈的亮點 背景亮點的顏色整體呈現漸變色變化 1. 默認背景色 首先我們來看看如何通過CSS創建一個多個小點背景效果。

交互設計 , css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - [譯]原生CSS嵌套使用

本文翻譯自 CSS Nesting，作者：Ahmad Shadeed， 略有刪改。 如果你是一個前端開發人員，那麼你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。 今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關

sass , css3 , Css , 翻譯 , 前端

收藏 評論

nanchengfe 頭像

南城FE - 炫酷鼠標懸停隨機漸變文本動畫效果

如圖所示，這是一個很炫酷的鼠標懸停動畫效果，卡片的文字隨着鼠標的移動不斷變化着，且文字的顏色伴隨着漸變色跟隨鼠標移動，中心部分是突出的LOGO效果，整個交互效果十分引人注目。原效果來源於 evervault.com/customers 這個網站，有興趣的可以體驗看看～ 本次文章將解析如何用代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 卡片在鼠標懸停時出現漸變隨機文字

css3 , 動畫 , Css , 前端

收藏 評論

dengzhanyong 頭像

鄧佔勇 - 利用CSS延遲動畫，打造令人驚豔的複雜動畫效果！

動畫在前端開發中是經常遇到的場景之一，加入動畫後頁面可以極大的提升用户體驗。 絕大多數簡單的動畫場景可以直接通過CSS實現，對於一些特殊場景的動畫可能會使用到JS計算實現，通過本文的學習，可以讓你在一些看似需要使用JS實現的動畫場景，使用純CSS一樣可以實現，並且更方便快捷。 先看一個簡單的例子：一個方塊的位置隨着滑條滑動的位置改變 這個場景實現起來很簡單，滑條值改變後，使用JS計

css3 , css3動畫 , 前端

收藏 評論

xboxyan 頭像

XboxYan - 不一樣的SVG！SVG在CSS背景平鋪中的應用

歡迎關注我的公眾號：前端偵探 再次介紹一些你可能沒用過的SVG小技巧。 有時候會遇到一些完全相同的圖形，如果能用上 CSS背景平鋪，那就再合適不過了。舉個例子，有這樣一個按鈕 相比普通的按鈕，多個左右兩個小裝飾，如果是你，會怎樣實現呢？ 假設這個小圖標是a.svg，想了一下，應該有以下幾種方式 1.偽元素 剛好用上::before和::after，設置相同的背景就行了，示意如下 butto

css3 , Css , 前端 , svg

收藏 評論

nanchengfe 頭像

南城FE - 純CSS絲滑邊框線條動畫

在這個網站（minimal-portfolio-swart.vercel.app）發現一個不錯的交互效果，用户體驗效果很不錯。如封面圖所示，這個卡片上有一根白色的線條圍繞着卡片移動，且在線條的卡片內部跟隨這一塊模糊陰影，特別是在線條經過卡片圓角部分有特別絲滑的感覺。 今天的文章就來解析如何實現這種效果，文末附源碼預覽地址。根據示例圖片分析需要實現的功能點如下： 線條跟隨卡片邊框勻速移動 線

css3 , 動畫 , Css , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：如何生成簡單動畫讓圖形動起來

大家好，本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中，動畫它是強化數據表達，吸引用户的重要技術手段。 在具體實現動畫之前，我們先來了解一下動畫的三種形式，分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像，將圖像依次播放] D -- C[動態繪製

shader , css3 , 動畫 , webgl , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS螢火蟲按鈕特效

如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事

css3 , 動畫 , 前端

收藏 評論

good_luck_5e9ba6e9aa054 頭像

360Web - 2026年Vue3 Admin前端框架開發技術深度解析

2026年Vue Admin前端框架開發技術深度解析 一、技術趨勢與演進方向 1.1 構建工具革命 2026年，Vite 6已成為默認構建工具，其基於Rust的Rolldown引擎使構建速度較Webpack提升300%。配合模塊聯邦（Module Federation）特性，可輕鬆實現微前端架構，例如將商品管理、支付系統拆分為獨立子應用動態加載。Vue Admin Better已實現通過單一配置項

css3 , HTML , 前端 , Javascript

收藏 評論

axui 頭像

AXUI - AXUI 發佈萬能網頁模版，包含 100+ 設計精美的模塊，複製可用，適合展示型網站

模板簡介 基於 AXUI 開發的前端萬能網頁模版，包含了list列表、banner通欄、form表單、accordion摺疊菜單、tab切換菜單、aside側邊板塊、card卡片圖文、map地圖板塊、marquee跑馬燈板塊、stats數字統計板塊、text正文板塊等常用模版。 模板特點 基於 AXUI 前端框架 基於 HTML5、CSS3 和 ES6 標準開發 CSS 和 JS 的

css3 , 模板 , typescript , 前端 , Javascript

收藏 評論

yeshifu 頭像

程序員老葉 - 2025年主流CRM系統產品全面解析

CRM（客户關係管理）系統已成為企業提升銷售效率、優化客户體驗、實現業績增長的核心工具。2025年，CRM市場格局日趨成熟，無論是國內還是國際廠商，都在產品功能、生態集成、智能化等方面持續創新。本文將對2025年主流CRM系統進行全面解析，幫助企業選型提供參考。 一、國內主流CRM系統 1. Zoho CRM 市場地位：國內CRM市場佔有率多年領先，2025年在全球企業級SaaS CRM領域繼

css3 , chrome-devtools

收藏 評論

weidelanqiu 頭像

下一個絕世 - 教育 CRM 哪個好用？教育 CRM 系統詳細拆解

在當今瞬息萬變的教育環境中，提供有競爭力的教育服務變得尤為重要。特別是面對出國留學市場的激烈競爭，每一個教育機構都需要高效的客户關係管理（CRM）工具來統籌管理學生信息，提升服務質量，從而贏得家長和學生的信任。本文將以“教育CRM哪個好用？”為主題，探討如何選擇一款適合教育行業的CRM，以及為什麼Zoho CRM是一個非常值得推薦的選擇。 一、瞭解教育行業的獨特需求 對於專注於出國留學服務的教育機

css3 , HTML

收藏 評論

lanyiyun666 頭像

藍易雲 - python telnetlib詳解

Python telnetlib 詳解（含 3.13 之後的替代方案） 適用讀者：需要在受控內網/實驗環境使用 Telnet 的同學。生產環境強烈建議優先 SSH（如 Paramiko/Netmiko）。 版本事實：telnetlib 在 span style="color:red"Python 3.11 標記棄用/span，並已在 span style="color:red"Pytho

css3 , Css , HTML , html5 , Javascript

收藏 評論

axuicn 頭像

AXUI前端框架 - AXUI前端框架推出全新自定義主題顏色工具

前言 對於一款成熟的 UI 框架而言，支持自定義主題顏色是必不可少的能力。過去，AXUI 一直專注於功能優化、性能提升和新模塊開發，因此遲遲未推出主題工具。但事實上，在 AXUI 的底層設計階段，我們已經為主題可定製性做好了充分準備：整個框架的主題色均採用 HSLA 模型進行設計。 HSLA 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness）和透明度（Alpha）。與

vue.js , css3 , 前端框架 , html5 , Javascript

收藏 評論

bukenengdeshi 頭像

不可能的是 - 深度解析：Sass-loader Legacy API 警告的前世今生與完美解決方案

📖 文章概述 當你在前端項目中看到 Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 這個警告時，是否感到困惑？本文將帶你深入探索這個警告背後的技術原理，從源碼層面分析調用鏈路，對比不同版本的功能差異，並提供多種實用的解決方案。 你

css3 , Css , typescript , 前端 , Javascript

收藏 評論

linyuyizhizou_678b9fdc436f1 頭像

小帆聊前端 - Flex 佈局實戰指南：從踩坑到精通，解決 90% 佈局難題

前言：你是否也被這些 Flex 問題折磨過？ “為什麼我用justify-content: center卻無法垂直居中？” “align-items和align-content到底什麼時候生效？” “設置了width: 200px，加了flex:1後怎麼沒用了？” 作為前端開發最常用的佈局方案，Flex（彈性佈局）以 “靈活” 著稱，但這份靈活也讓很多開發者陷入 “混亂”—— 核心原因是沒吃透 “

css3 , Css , 前端

收藏 評論

good_luck_5e9ba6e9aa054 頭像

360Web - 2025 Vue3 Admin Better前端發展展望

Vue3 Admin Better 與 Vue Admin Better：技術演進與核心差異解析 一、Vue3 Admin Better：企業級後台框架的技術革新 核心架構與技術特性 Vue3 Admin Better 是基於 Vue 3 生態構建的企業級後台管理系統框架，其核心優勢體現在以下方面： • 雙版本兼容性 支持 Vue 2.x（Element UI）與 Vue 3.x（Eleme

vue.js , sass , css3 , 前端 , Javascript

收藏 評論

zhuifengdekukafei 頭像

追風的苦咖啡 - 雙算法 SSL 證書技術白皮書：SM2+RSA/ECC 混合加密機制深度解析

雙算法 SSL 證書技術白皮書：SM2+RSA/ECC 混合加密機制深度解析 前言：為何需要雙算法 SSL 證書？ 在全球加密體系多元化與合規要求差異化的背景下，單一算法 SSL 證書逐漸難以滿足複雜場景需求：國內政務、金融等領域需遵循《商用密碼應用安全性評估》要求採用 SM2 等國密算法，而國際業務又依賴 RSA/ECC 實現瀏覽器與服務器的互信。雙算法 SSL 證書通過在同一證書中集成 SM2

css3 , mongodb , objective-c , Linux , chrome-devtools

收藏 評論

linyuyizhizou_678b9fdc436f1 頭像

小帆聊前端 - CSS 選擇器全解析：從基礎語法到組件庫樣式修改，解決前端樣式定位難題

前言：被 CSS 選擇器 “卡殼” 的日常 “寫了.btn-active樣式，為什麼按鈕沒反應？” “#nav .list li和.nav-list li到底誰能生效？” “想改組件庫的輸入框樣式，加了類卻被覆蓋？” “用[class=btn]匹配按鈕，多了個類名就失效了？” CSS 選擇器是前端樣式的 “定位工具”，但很多開發者停留在 “會用類和 ID” 的初級階段，面對動態元素、組件庫樣式修改

css3 , Css , 前端

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp一個透明佔位的nav-bar組件

該組件是一個透明佔位的頭部nav-bar組件，組件的大小位於最頂部一直到膠囊底部的位置，如下： 內部提供一個插槽，這個插槽的高度跟膠囊的高度一致，你可以自定義一些按鈕，跟膠囊對齊 template view :style="{ height: navBar.totalHeight + 'px', back

react , vue.js , css3 , 前端 , Javascript

收藏 評論

peter-gasston 頭像

Peter Gasston - Adventures In The Third Dimension: CSS 3D Transforms

This proposal was called 3D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, how

css3 , coding , Css

收藏 評論