tag css3

標籤
貢獻98
156
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 訂閱

wskongdesheng 頭像

wskongdesheng - svg中stroke-dashoffset實現簡單動效

屬性介紹 stroke-dashoffset stroke-dashoffset 屬性指定了dash模式到路徑開始的距離 如果使用了一個 百分比 值， 那麼這個值就代表了當前viewport的一個百分比。 值可以取為負值 先看效果 button class="menu__item" style="--bgColorItem: #f54888;" svg class

css3 , svg動畫

收藏 評論

teamwei 頭像

teamwei - Less中函數的高級應用，PC、Web移動端適配的良藥偏方

多端適配 熟悉前端開發的一定會遇到這個問題，屏幕適配！有的項目要求同時適配PC、平板和移動端，那我們應該是寫幾套不同的樣式，還是隻寫一套呢？哪一種才是最好的？ 其實沒有哪一種最好的，還是得根據項目的需求來定，一般情況下我是推薦只寫一套代碼，因為這樣可以降低開發成本和維護難度。那麼就有個問題，一套代碼如何去適配不同設備？尺寸該用什麼單位？px？em？rem？ 我想大部分人的實現無非就那幾種方案： 在

css3 , less , 移動端適配 , 前端 , html5

收藏 評論

bianchengsanmei 頭像

編程三昧 - 前端 CSS 變量簡介及基本使用方法

背景 複雜的網站都會有大量的CSS代碼，通常也會有許多重複的值。 舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索並且一個一個替換，效率不高且容易出錯。 自定義屬性在某個地方存儲一個值，然後在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。 概

css3 , css技巧 , css變量var , Css , 前端

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - Why We Should Start Using CSS3 And HTML5 Today

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work look

css3 , coding , Css , HTML , html5

收藏 評論

gqkmiss 頭像

月恆 - CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫

CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫 1. 前言 需求中想做出個這種效果，這個頁面又是一個單獨的 html 頁面，沒必要再單獨引入其他模塊了 就想着用 CSS 動畫來實現 2. 實現效果 3. 實現思路 3.1. 項目要求 ... 不能使所在的 dom 元素寬度變化，不然加個 . 變寬，少個點變窄，不好看 需要使用 animation 動畫的 infi

loading , css3 , css技巧 , Css , 前端

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - CSS3 Design Ideas

This process has taken a lot of time as it wasn’t easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry

css3 , Layouts , coding

收藏 評論

david-sparks 頭像

Dave Sparks - Using CSS3: Older Browsers And Common Considerations

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uniniti

css3 , coding , Css , Browsers , Essentials

收藏 評論

chris-spooner 頭像

Chris Spooner - Push Your Web Design Into The Future With CSS3

**Editor's Note (May 22, 2024):** CSS has significantly evolved since the original publication of this article in 2009. Since then, CSS has shipped an incredible number of new features including [re

css3 , coding , Css

收藏 評論

gqkmiss 頭像

月恆 - CSS 小技巧 —— CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層

CSS 小技巧 —— CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層 1. 兩個元素實現 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" title純 CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層/title style *{ padding: 0;

css3 , css技巧 , tooltip , 前端

收藏 評論

sam-collins 頭像

Sam Collins - Free Zocial Button Set: Social CSS3 Buttons

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goa

Buttons , css3 , Freebies , coding

收藏 評論

doupifaner 頭像

豆皮範兒 - CSS3實戰：實現一個旋轉的3D金幣

CSS3實戰：實現一個旋轉的3D金幣 最近親愛的產品同學，提了一個需求：在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好，我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫，讓我們來看一下是如何實現的吧~ 作者：未見 如下圖 拿到這個需求，第一反應gif+a標籤，簡單粗暴+便捷。即將實施就碰到一個問題，UI小姐姐還沒有做設計，排期需要在x天后~怎麼辦？沒有難做的工作，只有解

css3 , css3動畫 , 前端

收藏 評論

yangrd 頭像

yangrd - web-compiler：mvvm 的實現思路

最近一段時間留意到一個叫Svelte的前端框架，它與Vue 等前端框架的最大不同是採用了編譯的方案進行的實現，這是官網的介紹 Svelte 是一種全新的構建用户界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。 與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就

css3 , mvvm , compiler , HTML , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 那些你不知道的 CSS 自定義形狀網格佈局

本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c

佈局 , css3 , Css , HTML , 前端

收藏 評論

jsliang 頭像

jsliang - CSS 實例系列 - 03 - Rate 愛心評分

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Rate 評分 本期將和小夥伴們探討： √ 通過 CSS，配合簡單的 HTML + JS 完成評分組件 本實例的代碼地址： Github - all for one 碼上掘金 - 03 - Rate 愛心評分 一 前言 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥

css3 , css3動畫 , 前端

收藏 評論

jsliang 頭像

jsliang - CSS 實例系列 - 04 - Dropdown 下拉麪板

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Dropdown 下拉麪板 本期將和小夥伴們探討： √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址： Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系

css3 , Css , css3動畫 , 前端 , html5

收藏 評論

hooozen 頭像

hooozen - 前端工程師需要知道的字體知識

隨着網頁個性化設計和品牌特色的需要，在網頁中使用特定的字體將成為越來越常見的需求。現代字體設計經歷了數十年的發展，已經積累了成熟的標準和規範，但對於許多前端開發者來説可能可能還比較陌生，本文就前端開發過程中可能遇到的字體知識做一個梳理和介紹。 博客原文：https://www.hozen.site/archives/64/ 字體基礎 字體標準 字體的設計和使用和其他任何工業設計產品一樣，需要統一的

css3 , 字體 , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS小技巧使用 font-variation 讓文字起飛

今天逛codepen的時候發現了一個不錯的文字動畫效果，如此絲滑飄逸的效果必須得研究研究，可以看到字體粗細切換過渡效果很均勻，不像我們平常使用字體時設置 font-weight 的效果，日常設置字重的時候並不是每個值都會生效，只會有幾個區間的值是可用的，以下代碼給6個p標籤設置font-weight 從 100 到 600： @for $i from 1 through 6 { p:nth-

設計 , css3 , 動畫 , 字體 , 前端

收藏 評論

nanchengfe 頭像

南城FE - 如何使用CSS Grid 居中 div

本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改 在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。 初始化 我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML： artic

佈局 , css3 , Css , 前端

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十四】CSS3新特性

前言 本篇章主要講述CSS3新特性，如svg、canvans以及動畫。 面試回答 1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。 知識點 1.SVG 參考博客：https://juejin.cn/post/684490

css3 , less , Css , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現魔法漸變邊框卡片

如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。 基於上面的動圖可以分析出以下是本次實現的主要幾點： 卡片的邊框是漸變色 卡片的邊框呈順時針動畫 卡片底部還有陰影隨着邊框動畫而變化 鼠標懸停時動畫隱藏顯示靜態的卡片 實現過程 看到這樣的邊框首先要想到的

css3 , 動畫 , Css , 用户體驗 , 前端

收藏 評論

nanchengfe 頭像

南城FE - 基於 Letterize.js + Anime.js 實現炫酷文本特效

如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過

css3 , 動畫 , Css , 前端 , Javascript

收藏 評論

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 , 前端

收藏 評論