利用CSS延遲動畫，打造令人驚豔的複雜動畫效果！
動畫在前端開發中是經常遇到的場景之一，加入動畫後頁面可以極大的提升用户體驗。 絕大多數簡單的動畫場景可以直接通過CSS實現，對於一些特殊場景的動畫可能會使用到JS計算實現，通過本文的學習，可以讓你在一些看似需要使用JS實現的動畫場景，使用純CSS一樣可以實現，並且更方便快捷。 先看一個簡單的例子：一個方塊的位置隨着滑條滑動的位置改變 這個場景實現起來很簡單，滑條值改變後，使用JS計
昵称 鄧佔勇
@css3
贡献者28
粉丝0
贡献者
@css3
动态 列表
前端方面移動端適配方法，減少兼容性問題
使用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
昵称 miadk
深入理解 CSS Flexbox：如何使用彈性佈局實現自適應的水平和垂直居中
在 Web 開發中，佈局一直是 CSS 的一個重要主題，而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現，代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局（Flexbox）的引入，水平和垂直居中變得非常簡單、直觀，幾乎可以適應所有的佈局場景。 本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中，包括水平
昵称 用户bPdeG32
深入理解 HTML 語義化標籤：為什麼語義化標籤對網頁結構和 SEO 至關重要
在前端開發中，HTML 是構建網頁的基礎。HTML 的功能不僅僅是展示信息，還要幫助網頁結構化數據，以便瀏覽器、搜索引擎和輔助技術更好地理解網頁內容。語義化標籤是 HTML5 引入的一個重要概念，旨在讓標籤名稱表達其內容的意義。合理使用語義化標籤可以提高網頁的可訪問性和 SEO（搜索引擎優化）效果，使得頁面更具可讀性和結構性。 本文將專注於HTML 語義化標籤的定義、優勢、常用標籤及其適用場景，幫
昵称 用户bPdeG32
CSS專題之層疊上下文
前言 石匠敲擊石頭的第 15 次 在平常開發的時候，有時候會遇到使用 z-index 調整元素層級沒有效果的情況，究其原因還是因為對層疊上下文不太瞭解，看了網上很多前輩的文章，決定打算寫一篇文章來梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 什麼是層疊上下文 層疊上下文（Stacking Context）是 HTML 中的三維概念，它決定了元素在 Z 軸（垂直於電腦屏幕的方向） 上的顯示順序。
昵称 CodePencil
CSS專題之水平垂直居中
前言 石匠敲擊石頭的第 16 次 在日常開發中，經常會遇到水平垂直居中的佈局，雖然現在基本上都用 Flex 可以輕鬆實現，但是在某些無法使用 Flex 的情況下，又應該如何讓元素水平垂直居中呢？這也是一道面試的必考題，所以打算寫一篇文章來好好梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 分類 實現元素水平垂直居中的方法有很多，大致可以分為以下兩類： 固定寬高元素適用的方法 不固定寬高元素
昵称 CodePencil
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的高度未
昵称 兔子先森
解決移動端設備hover樣式不消失問題
下面是一段scss示例： .btn-text { border: 1px solid #cfd5de; transition: all 0.3s; @media (hover: hover) { :hover { color: #006eff; border-color: #006eff; } } :active { col
昵称 兔子先森
前端頁面單詞、網址溢出換行
效果： 在css中，對文字可以使用：flex-wrap: wrap; 來實現文字溢出換行。 但如果文字是英文、網址，該屬性則無效。 我們需要對英文、網址進行斷字，然後使其換行，下面是mdn的解釋： .company_detail_webaddress{ max-width: 55%; margin-right: 10rpx;
昵称 兔子先森
強烈推薦 Web前端在線代碼IDE(代碼編輯器)
好用代碼在線編輯器推薦 在前端開發的世界裏，一款高效、便捷的代碼編輯器是每位開發者的得力助手。今天，我將以一名前端技術愛好者的身份，為大家介紹一款專注於前端領域的免費在線代碼編輯器——ColaOnlineCoder。它不僅支持在線編輯和預覽HTML、CSS、JavaScript等前端代碼，還集成了豐富的在線前端框架模板，以及強大的AI編程助手能力，為前端開發帶來了前所未有的便捷與可能。 這裏先貼一
昵称 六月的可樂🥤
設置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
昵称 煌大河ゞ
Madalin Stunt Cars 2：極限特技賽車網頁版深度解析（附遊戲試玩）
💂 網站推薦:【 摸魚遊戲】【神級代碼資源網站】【星海網址導航】 摸魚、技術交流羣👉 點此查看詳情 你是否厭倦了傳統賽車遊戲的固定賽道？《Madalin Stunt Cars 2》（點此試玩）帶來完全不同的狂野體驗： ✅ 自由開放世界 – 無賽道限制，全地圖任你狂飆 ✅ 超真實物理引擎 – 翻車、飛躍、360°空翻全模擬 ✅ 多款豪車可選 – 跑車、越野車、肌肉
昵称 海擁
《vue.js設計與實現》——嵌套的 effect 與 effect 棧
effect 是可以發生嵌套的 vue.js的下渲染函數其實就是在一個effect中執行的 當組件發生嵌套時，例如Foo組件渲染了Bar組件 // Bar組件 const Bar = { render() { } } // Foo組件嵌套渲染了Bar組件 const Foo = { render() { return Bar / } } 此時就發
昵称 兔子先森
AXUI 發佈萬能網頁模版，包含 100+ 設計精美的模塊，複製可用，適合展示型網站
模板簡介 基於 AXUI 開發的前端萬能網頁模版，包含了list列表、banner通欄、form表單、accordion摺疊菜單、tab切換菜單、aside側邊板塊、card卡片圖文、map地圖板塊、marquee跑馬燈板塊、stats數字統計板塊、text正文板塊等常用模版。 模板特點 基於 AXUI 前端框架 基於 HTML5、CSS3 和 ES6 標準開發 CSS 和 JS 的
昵称 AXUI
2025年主流CRM系統產品全面解析
CRM（客户關係管理）系統已成為企業提升銷售效率、優化客户體驗、實現業績增長的核心工具。2025年，CRM市場格局日趨成熟，無論是國內還是國際廠商，都在產品功能、生態集成、智能化等方面持續創新。本文將對2025年主流CRM系統進行全面解析，幫助企業選型提供參考。 一、國內主流CRM系統 1. Zoho CRM 市場地位：國內CRM市場佔有率多年領先，2025年在全球企業級SaaS CRM領域繼
昵称 程序員老葉
教育 CRM 哪個好用？教育 CRM 系統詳細拆解
在當今瞬息萬變的教育環境中，提供有競爭力的教育服務變得尤為重要。特別是面對出國留學市場的激烈競爭，每一個教育機構都需要高效的客户關係管理（CRM）工具來統籌管理學生信息，提升服務質量，從而贏得家長和學生的信任。本文將以“教育CRM哪個好用？”為主題，探討如何選擇一款適合教育行業的CRM，以及為什麼Zoho CRM是一個非常值得推薦的選擇。 一、瞭解教育行業的獨特需求 對於專注於出國留學服務的教育機
昵称 下一個絕世
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
昵称 360Web
前端wavesurfer.js錄音+波形功能
vue3項目，主要通過wavesurfer.js實現前端錄音+實時波形渲染 template div class="audio-container" @click="onStop" div class="flex-between audio-box" v-if="!transform" div你可以開始説話/div div class="audio" id="w
昵称 兔子先森
uniapp一個透明佔位的nav-bar組件
該組件是一個透明佔位的頭部nav-bar組件，組件的大小位於最頂部一直到膠囊底部的位置，如下： 內部提供一個插槽，這個插槽的高度跟膠囊的高度一致，你可以自定義一些按鈕，跟膠囊對齊 template view :style="{ height: navBar.totalHeight + 'px', back
昵称 兔子先森
如何快速查看頁面的佈局結構？
在前端頁面 UI 開發時，如何能快速查看頁面的結構佈局？ html * { outline: 1px solid red !important; } outline 屬性不會增加元素的尺寸，比 border 要好。
昵称 起風了
不一樣的SVG！SVG在CSS背景平鋪中的應用
歡迎關注我的公眾號：前端偵探 再次介紹一些你可能沒用過的SVG小技巧。 有時候會遇到一些完全相同的圖形，如果能用上 CSS背景平鋪，那就再合適不過了。舉個例子，有這樣一個按鈕 相比普通的按鈕，多個左右兩個小裝飾，如果是你，會怎樣實現呢？ 假設這個小圖標是a.svg，想了一下，應該有以下幾種方式 1.偽元素 剛好用上::before和::after，設置相同的背景就行了，示意如下 butto
昵称 XboxYan
手把手使用 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，所以目
昵称 xachary
AXUI前端框架推出全新自定義主題顏色工具
前言 對於一款成熟的 UI 框架而言，支持自定義主題顏色是必不可少的能力。過去，AXUI 一直專注於功能優化、性能提升和新模塊開發，因此遲遲未推出主題工具。但事實上，在 AXUI 的底層設計階段，我們已經為主題可定製性做好了充分準備：整個框架的主題色均採用 HSLA 模型進行設計。 HSLA 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness）和透明度（Alpha）。與
昵称 AXUI前端框架
用Zulu輕鬆搭建國慶旅行4行詩網站
國慶已至，小夥伴們都要去哪裏旅行呀？是人傑地靈的杭州，還是熱辣滾燙的重慶？不如就用Zulu開發一個“國慶旅行4行詩網站”，用詩情畫意，勾勒出祖國山河的美好～ 網站開發，大概用了1小時不到，包含項目初始化、AI生成功能增強、UI優化這幾個關鍵步驟。 1.項目初始化 對Zulu鍵入第一條Prompt： 我想在當前目錄創建一個國慶旅行四行詩AI生成器網站，輸入旅行城市（到市級），即可輸出對應
昵称 文心快碼