tag css3

標籤
貢獻98
161
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代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 整個背景中有平均分佈的小點襯托中心區域 文字閃爍效果如同霓虹燈一樣 文字背景呈多個平均分佈的亮點 背景亮點的顏色整體呈現漸變色變化 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 , 動畫 , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS炫酷光暈按鈕特效

如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line

css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現海浪文字效果

如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 整體呈現出3D文案效果 文案呈現波動狀態動畫 文案有漸變顏色的變化 文案在變化過程中有傾斜分層的效果 1. 基礎樣式 首先我們從佈局和基礎樣式開始。 通過上面的圖片可以看出動畫中的

css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現有趣emoji切換開關

這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實

css3 , 動畫 , Css , 前端

收藏 評論

judei 頭像

Judei - 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-

css3 , less , 前端 , html5 , Javascript

收藏 評論

daoshanghundesijidou 頭像

用户bPdeG32 - 深入理解 CSS Flexbox：如何使用彈性佈局實現自適應的水平和垂直居中

在 Web 開發中，佈局一直是 CSS 的一個重要主題，而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現，代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局（Flexbox）的引入，水平和垂直居中變得非常簡單、直觀，幾乎可以適應所有的佈局場景。 本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中，包括水平

ecmascript-6 , css3 , Css , HTML , 前端

收藏 評論

daoshanghundesijidou 頭像

用户bPdeG32 - 深入理解 HTML 語義化標籤：為什麼語義化標籤對網頁結構和 SEO 至關重要

在前端開發中，HTML 是構建網頁的基礎。HTML 的功能不僅僅是展示信息，還要幫助網頁結構化數據，以便瀏覽器、搜索引擎和輔助技術更好地理解網頁內容。語義化標籤是 HTML5 引入的一個重要概念，旨在讓標籤名稱表達其內容的意義。合理使用語義化標籤可以提高網頁的可訪問性和 SEO（搜索引擎優化）效果，使得頁面更具可讀性和結構性。 本文將專注於HTML 語義化標籤的定義、優勢、常用標籤及其適用場景，幫

ecmascript-6 , css3 , node.js , HTML , html5

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - 如何快速查看頁面的佈局結構？

在前端頁面 UI 開發時，如何能快速查看頁面的結構佈局？ html * { outline: 1px solid red !important; } outline 屬性不會增加元素的尺寸，比 border 要好。

佈局 , css3 , Css , 前端 , ui

收藏 評論

hui_61e3b3803b922 頭像

xachary - 手把手使用 SVG + CSS 實現漸變進度環效果

效果 在線Demo 軌道 使用 svg 畫個軌道 svg viewBox="0 0 100 100" circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke="#333"/circle /svg 簡單的説，就是使用 circle 畫個圓。需要注意的是，軌道實際是 circle 的 stroke，所以目

css3 , Javascript , svg

收藏 評論

shenchendebanma 頭像

miadk - 前端方面移動端適配方法，減少兼容性問題

使用viewport配置，確保完美視口。 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" 關鍵屬性解析： width=device-width：將視口寬度設置為設備寬度 init

react-native , css3 , 小程序 , ios , Javascript

收藏 評論

codepencil 頭像

CodePencil - CSS專題之層疊上下文

前言 石匠敲擊石頭的第 15 次 在平常開發的時候，有時候會遇到使用 z-index 調整元素層級沒有效果的情況，究其原因還是因為對層疊上下文不太瞭解，看了網上很多前輩的文章，決定打算寫一篇文章來梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 什麼是層疊上下文 層疊上下文（Stacking Context）是 HTML 中的三維概念，它決定了元素在 Z 軸（垂直於電腦屏幕的方向） 上的顯示順序。

css3 , Css , HTML , 前端 , html5

收藏 評論

codepencil 頭像

CodePencil - CSS專題之水平垂直居中

前言 石匠敲擊石頭的第 16 次 在日常開發中，經常會遇到水平垂直居中的佈局，雖然現在基本上都用 Flex 可以輕鬆實現，但是在某些無法使用 Flex 的情況下，又應該如何讓元素水平垂直居中呢？這也是一道面試的必考題，所以打算寫一篇文章來好好梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 分類 實現元素水平垂直居中的方法有很多，大致可以分為以下兩類： 固定寬高元素適用的方法 不固定寬高元素

css3 , Css , HTML , 前端 , html5

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - css元素高度佔滿餘下空間

div class="box" div class="box1"/div div class="box2" div style="height: 500px;border: 1px solid gold;" /div /div /div 在css中，div的寬度默認獨佔一行，而高度需要手動設置。 上面的佈局，box 高度 300 box1的高度未

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

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 解決移動端設備hover樣式不消失問題

下面是一段scss示例： .btn-text { border: 1px solid #cfd5de; transition: all 0.3s; @media (hover: hover) { :hover { color: #006eff; border-color: #006eff; } } :active { col

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

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端頁面單詞、網址溢出換行

效果： 在css中，對文字可以使用：flex-wrap: wrap; 來實現文字溢出換行。 但如果文字是英文、網址，該屬性則無效。 我們需要對英文、網址進行斷字，然後使其換行，下面是mdn的解釋： .company_detail_webaddress{ max-width: 55%; margin-right: 10rpx;

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

收藏 評論

liuyuedekele 頭像

六月的可樂🥤 - 強烈推薦 Web前端在線代碼IDE(代碼編輯器)

好用代碼在線編輯器推薦 在前端開發的世界裏，一款高效、便捷的代碼編輯器是每位開發者的得力助手。今天，我將以一名前端技術愛好者的身份，為大家介紹一款專注於前端領域的免費在線代碼編輯器——ColaOnlineCoder。它不僅支持在線編輯和預覽HTML、CSS、JavaScript等前端代碼，還集成了豐富的在線前端框架模板，以及強大的AI編程助手能力，為前端開發帶來了前所未有的便捷與可能。 這裏先貼一

css3 , 人工智能 , typescript , 前端 , html5

收藏 評論

huagntm 頭像

煌大河ゞ - 設置css的rotate ，perspective為2000px,求div的視覺投影二維座標

設置：transform ：rotateX(30deg) rotateY(40deg) rotateZ(0deg) /** 計算旋轉後的四個角點 3D 座標（支持動態左上角座標） @param {number} left - 左上角初始 x 座標 @param {number} top - 左上角初始 y 座標 @param {number} width - 元素寬度 @param

css3 , Javascript

收藏 評論