[譯]原生CSS嵌套使用
本文翻譯自 CSS Nesting，作者：Ahmad Shadeed， 略有刪改。 如果你是一個前端開發人員，那麼你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。 今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關
昵称 南城FE
@css3
贡献者28
粉丝0
贡献者
@css3
动态 列表
前端工程師需要知道的字體知識
隨着網頁個性化設計和品牌特色的需要，在網頁中使用特定的字體將成為越來越常見的需求。現代字體設計經歷了數十年的發展，已經積累了成熟的標準和規範，但對於許多前端開發者來説可能可能還比較陌生，本文就前端開發過程中可能遇到的字體知識做一個梳理和介紹。 博客原文：https://www.hozen.site/archives/64/ 字體基礎 字體標準 字體的設計和使用和其他任何工業設計產品一樣，需要統一的
昵称 hooozen
CSS小技巧使用 font-variation 讓文字起飛
今天逛codepen的時候發現了一個不錯的文字動畫效果，如此絲滑飄逸的效果必須得研究研究，可以看到字體粗細切換過渡效果很均勻，不像我們平常使用字體時設置 font-weight 的效果，日常設置字重的時候並不是每個值都會生效，只會有幾個區間的值是可用的，以下代碼給6個p標籤設置font-weight 從 100 到 600： @for $i from 1 through 6 { p:nth-
昵称 南城FE
那些你不知道的 CSS 自定義形狀網格佈局
本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c
昵称 南城FE
如何使用CSS Grid 居中 div
本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改 在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。 初始化 我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML： artic
昵称 南城FE
web-compiler：mvvm 的實現思路
最近一段時間留意到一個叫Svelte的前端框架，它與Vue 等前端框架的最大不同是採用了編譯的方案進行的實現，這是官網的介紹 Svelte 是一種全新的構建用户界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。 與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就
昵称 yangrd
純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
CSS螢火蟲按鈕特效
如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事
昵称 南城FE
CSS炫酷光暈按鈕特效
如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line
昵称 南城FE
純CSS實現有趣emoji切換開關
這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實
昵称 南城FE
純CSS實現魔法漸變邊框卡片
如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。 基於上面的動圖可以分析出以下是本次實現的主要幾點： 卡片的邊框是漸變色 卡片的邊框呈順時針動畫 卡片底部還有陰影隨着邊框動畫而變化 鼠標懸停時動畫隱藏顯示靜態的卡片 實現過程 看到這樣的邊框首先要想到的
昵称 南城FE
基於 Letterize.js + Anime.js 實現炫酷文本特效
如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過
昵称 南城FE
純CSS實現炫酷背景霓虹燈文字效果
如圖所示，這是一個很炫酷的霓虹燈文字效果且背景炫酷，就像很多個燈光閃爍着不同的顏色。 本次文章將解析如何用CSS代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 整個背景中有平均分佈的小點襯托中心區域 文字閃爍效果如同霓虹燈一樣 文字背景呈多個平均分佈的亮點 背景亮點的顏色整體呈現漸變色變化 1. 默認背景色 首先我們來看看如何通過CSS創建一個多個小點背景效果。
昵称 南城FE
純CSS絲滑邊框線條動畫
在這個網站（minimal-portfolio-swart.vercel.app）發現一個不錯的交互效果，用户體驗效果很不錯。如封面圖所示，這個卡片上有一根白色的線條圍繞着卡片移動，且在線條的卡片內部跟隨這一塊模糊陰影，特別是在線條經過卡片圓角部分有特別絲滑的感覺。 今天的文章就來解析如何實現這種效果，文末附源碼預覽地址。根據示例圖片分析需要實現的功能點如下： 線條跟隨卡片邊框勻速移動 線
昵称 南城FE
可視化學習：如何生成簡單動畫讓圖形動起來
大家好，本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中，動畫它是強化數據表達，吸引用户的重要技術手段。 在具體實現動畫之前，我們先來了解一下動畫的三種形式，分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像，將圖像依次播放] D -- C[動態繪製
昵称 beckyyyy
純CSS實現海浪文字效果
如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 整體呈現出3D文案效果 文案呈現波動狀態動畫 文案有漸變顏色的變化 文案在變化過程中有傾斜分層的效果 1. 基礎樣式 首先我們從佈局和基礎樣式開始。 通過上面的圖片可以看出動畫中的
昵称 南城FE
【十四】CSS3新特性
前言 本篇章主要講述CSS3新特性，如svg、canvans以及動畫。 面試回答 1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。 知識點 1.SVG 參考博客：https://juejin.cn/post/684490
昵称 馳驥
Element Table 表格樹形結構多選框選中子級父級狀態變為半選中狀態（遞歸多級）
1.實現效果 2.數據和佈局準備 準備一個 el-table 組件以及數據源，這裏的數據源可以是你的接口提供的。 template div style="width: 78%;" el-table ref="menuTableRef" :data="menuList" style="width: 100%;margin-bottom: 20px;" :row-class-
昵称 Judei
CSS3實戰：實現一個旋轉的3D金幣
CSS3實戰：實現一個旋轉的3D金幣 最近親愛的產品同學，提了一個需求：在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好，我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫，讓我們來看一下是如何實現的吧~ 作者：未見 如下圖 拿到這個需求，第一反應gif+a標籤，簡單粗暴+便捷。即將實施就碰到一個問題，UI小姐姐還沒有做設計，排期需要在x天后~怎麼辦？沒有難做的工作，只有解
昵称 豆皮範兒
CSS 實例系列 - 03 - Rate 愛心評分
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Rate 評分 本期將和小夥伴們探討： √ 通過 CSS，配合簡單的 HTML + JS 完成評分組件 本實例的代碼地址： Github - all for one 碼上掘金 - 03 - Rate 愛心評分 一 前言 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥
昵称 jsliang
CSS 實例系列 - 04 - Dropdown 下拉麪板
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Dropdown 下拉麪板 本期將和小夥伴們探討： √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址： Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系
昵称 jsliang