熟練掌握並充分利用CSS3的新特性,更新完畢。

来源:https://www.cnblogs.com/liushihong21/archive/2023/09/14/17694343.html
-Advertisement-
Play Games

介紹 ESLint 是一個根據方案識別並報告 ECMAScript/JavaScript 代碼問題的工具,其目的是使代碼風格更加一致並避免錯誤。在很多地方它都與 JSLint 和 JSHint 類似,除了: ESLint 使用 Espree 對 JavaScript 進行解析。 ESLint 在代碼 ...


1.1  嘗試新穎的CSS3特性

首先,我們來看一個具體的案例。  https://code.juejin.cn/pen/7277536985772720139  

1.2  CSS3新特性簡介和瀏覽器支持情況

新特性簡介:

1)強大的CSS3選擇器 2)拋棄圖片的視覺效果 3)盒模型變化(多列佈局和彈性盒模型 ) 4)陰影效果 5)Web字體和web Font 圖標 6)CSS3過渡與動畫交互效果 7)媒體查詢

什麼是漸進增強和優雅降級?

1)漸進增強:指一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。相當於向上相容,從非常基礎的、能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。『向上相容,先滿足大多數瀏覽器』 2)優雅降級:指一開始就構建站點的完整功能,然後針對瀏覽器測試和修複。相當於向下相容,從複雜的現狀開始,並試圖減少用戶體驗的供給。優雅降級是從複雜的現狀開始,並試圖減少用戶體驗的供給。 『向下相容,滿足大多數用戶使用的主流瀏覽器』   1.3  CSS3偽類選擇器1 1)什麼是偽類選擇器? 偽類選擇器是CSS中的一種選擇器,用來選擇處於特定狀態的元素。 偽類選擇器是CSS選擇器的一種,它可以選擇處於特定狀態的元素,例如:鏈接(a:link)、已被訪問的鏈接(a:visited)、激活的鏈接(a:active)、滑鼠懸停鏈接(a:hover)、目標鏈接(a:target)等。 偽類選擇器的語法格式為:選擇器:偽類名{屬性:值;}。 2)動態偽類選擇器 動態偽類選擇器是CSS中的一種特殊類型的選擇器,它可以基於元素當前所處的狀態來選取元素。 動態偽類選擇器有:
  • :link:匹配所有未被訪問的鏈接。
  • :visited:匹配所有已被訪問的鏈接。
  • :hover:匹配滑鼠指針浮動在其上的元素。
  • :active:匹配被用戶激活的元素。
  • :focus:匹配獲得焦點的元素。
3)UI元素狀態偽類選擇器

UI元素狀態偽類選擇器是根據元素狀態來選擇元素的一種CSS選擇器,常見的UI元素狀態偽類選擇器包括以下幾個:

  • E:enabled:用來指定當前元素處於可用狀態時的樣式。
  • E:disabled:用來指定當前元素處於不可用狀態時的樣式。
  • E:read-only:用來指定當元素處於只讀狀態時的樣式。
  • E:read-write:用來指定當元素處於非只讀狀態時的樣式。
  • E:default:用來指定當頁面打開時預設處於選取狀態的單選按鈕或者覆選框的樣式。
  • E:indeterminate:用來指定當頁面打開時,如果一組單選按鈕中任何一個單選按鈕都沒有設定為選取狀態時的整組的單選按鈕的樣式。
  • E::selection:用來指定當元素處於選中狀態時的樣式。
Demo1.3  https://code.juejin.cn/pen/7278515130269171775   1.4  CSS3偽類選擇器2結構偽類選擇器 1)什麼是結構偽類選擇器? 結構偽類選擇器是針對HTML的結構進行分類的選擇器。 結構偽類選擇器根據文檔結構來選擇元素,常用於根據父級選擇器裡面的子元素,能大大減少HTML元素的id屬性和class屬性的依賴。結構偽類選擇器的特征就是位置,分為三大類,一類是e:first-child、e:last-child、e:only-child、e:nth-child(n/even/odd)等,二類是e:first-of-type、e:last-of-type、e:only-of-type、e:nth-of-type等, 三類是e:root、e:empty、e:target、e:not等。 Demo1.4  https://code.juejin.cn/pen/7277792582955565112   1.5  CSS3偽類選擇器2結構偽類選擇器

CSS3偽元素是CSS3的一個新特性,它可以幫助我們創建一些特殊的樣式效果。偽元素之所以被稱為偽元素,是因為他們不是真正的頁面元素,HTML沒有對應的元素,但是其所有用法和表現行為與真正的頁面元素一樣,可以對其使用諸如頁面元素一樣的CSS樣式,錶面上看上去貌似是頁面的某些元素來展現,實際上是CSS樣式展現的行為,因此被稱為偽元素。
CSS3偽元素有四種類型:

  • ::first-letter:選取元素的第一行文字。
  • ::first-line:選取元素的第一行文字。
  • ::before:在元素內部的前面插入內容。
  • ::after:在元素內部的後面插入內容。

請註意,偽元素必須與真實的選擇器一起使用,例如 p::before 或 h1::first-line。使用偽元素可以幫助我們簡化HTML結構,而不需要額外的HTML標簽。

Demo1.5  https://code.juejin.cn/pen/7277894226740772921

 

2.1  CSS3用border-radius畫圓形

Border-radius的優點:
  • 減少網站的維護工作量
  • 提高網站性能
  • 增加了視覺美觀性
Demo2.1  https://code.juejin.cn/pen/7277935336846524471   2.2  CSS3畫三角形和對話框 三角形角尖相反的方向設置顏色值。若角尖朝左,則右邊角設置顏色值。其他方向同理可得。 1)三角形 Demo2.2.1  https://code.juejin.cn/pen/7278146058071310375   2)對話框   Demo2.2.2  https://code.juejin.cn/pen/7278149522558517289   2.3  CSS3畫菱形和平行四邊形 transform適用於盒模型元素來傾斜(skew)、旋轉(rotate)、縮放(transform-origin)、位移(transform-origin) 1)菱形

Demo2.3.1  https://code.juejin.cn/pen/7278210215978205218

2)平行四邊形

Demo2.3.2  https://code.juejin.cn/pen/7278210662617055289

 

2.4  畫五角星和六角星

Demo2.4  https://code.juejin.cn/pen/7278269246235213865

 

2.5  CSS3畫五邊形和六邊形

Demo2.5  https://code.juejin.cn/pen/7278288845534134307

 

2.6  CSS3畫心形和蛋形

Demo2.6  https://code.juejin.cn/pen/7278511265814118460

 

2.7  CSS3畫太極陰陽圖

Demo2.7  https://code.juejin.cn/pen/7278601329470406667

 

3.1  CSS3製作透明背景層

1)opacity: value|inherit;
屬性值:
value 指定不透明度。從0.0(完全透明)到1.0(完全不透明)
inherit Opacity屬性的值應該從父元素繼承

2)box-shadow:3px 3px  5px  #888;   /* x偏移量 | y偏移量 | 陰影寬度 | 陰影顏色 */

Demo3.1  https://code.juejin.cn/pen/7278621775661891599

 

3.2  CSS3的顏色模式(1)

1)rgba(R,G,B,A)
R:紅色值。正整數百分數
G:綠色值。正整數百分數
B:藍色值。正整數|百分數
A:Alpha透明度。取值0~1之間

2)hsla(H,S,L,A)
H:Hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色下也可取其他數值來指定顏色。取值為:0-360
S:Saturation(飽和度)。取值為 :0.0%-100.0%
L:Lightness(亮度)。取值為 :0.0% - 100.0%
A:Alpha透明度。取值0~1之間。

Demo3.2  https://code.juejin.cn/pen/7278669706104422457

 

3.3  CSS3的顏色模式(2)-實例仿天貓商品展示效果

Demo3.3  https://code.juejin.cn/pen/7279067304699101239

 

3.4  CSS3線性漸變 linear-gradient([<point>||<angle>,]? <stop>,<stop>[,<stop>]*) <angle>:用角度值指定漸變的方向(或角度)。 to left: 設置漸變為從右到左。相當於:270deg to right:設置漸變從左到右。相當於:90deg  to top:設置漸變從下到上。相當於:0deg to bottom:設置漸變從上到下。相當於:180deg。   <color-stop>用於指定漸變的起止顏色: <color>:指定顏色。 <length>:用長度值指定起止色位置。不允許負值 <percentage>:用百分比指定起止色位置。

Demo3.4  https://code.juejin.cn/pen/7279081313213087763

 

3.5  CSS3徑向漸變 radial-gradient radial-gradient([<bg-position>||<angle>,]? [<shape>||<size>,]? <color-stop>,<color-stop>[,<color-stop>]*);

Demo3.5  https://code.juejin.cn/pen/7279083160313266232

 

3.6  CSS3重覆性漸變  radial-gradient([<bg-position>||<angle>,]? [<shape>||<size>,]? <color-stop>,<color-stop>[,<color-stop>]*);

Demo3.6  https://code.juejin.cn/pen/7279236997292818491

 

3.7  CSS3盒子陰影效果box-shadow

Demo3.7  https://code.juejin.cn/pen/7279238667225268279

 

4.1  CSS3製作緩慢變長的方形(transition特效)

Transition
transition-property: 過渡屬性(預設值為all),可填寫其他屬性例如background、width、height
transition-duration: 過渡持續時間(預設值為0s)
transiton-timing-function: 過渡函數(預設值為ease函數)
transition-delay: 過渡延遲時間(預設值為0s)

Demo4.1  https://code.juejin.cn/pen/7279236997292818491

 

4.2、4.3  CSS3仿天貓專題過渡效果實例

Demo4.2、4.3  https://code.juejin.cn/pen/7279618834334482493

 

4.4  CSS3仿天貓類別過渡效果製作

Demo4.4  https://code.juejin.cn/pen/7279633686172008511

 

5.1、5.2  CSS3動畫中的@keyframes關鍵幀講解

animation複合屬性講解
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Demo5.1、5.2  https://code.juejin.cn/pen/7279637600582697018

 

5.3  CSS3動畫綜合實例製作-內容載入loading動畫實現

Demo5.3  https://code.juejin.cn/pen/7279639554364833833

 

5.4  CSS3 Loading動畫效果實例2

Demo5.4  https://code.juejin.cn/pen/7279640723501088824

 

6.1  CSS3製作發光字,立體字,蘋果字體

text-shadow:h-shadow V-shadow blur color;

Demo6.1  https://code.juejin.cn/pen/7279788933557616655

 

6.2  CSS3 用text-overflow解決文字排版問題

text-overflow:clip | ellipsis | string;

Demo6.2  https://code.juejin.cn/pen/7279790619282079804

 

6.3  CSS3 新的字體單位rem-大結局

em是根據它的父級字體大小來決定的; rem 是根據文檔中的根元素來決定的。

Demo6.3  https://code.juejin.cn/pen/7279791510601220108

鑒定完畢,歡迎友們一起交流學習!!

本文來自博客園,作者:紅石榴21,轉載請註明原文鏈接:https://www.cnblogs.com/liushihong21/p/17694343.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、文件管理: 1.1、ls: ​ 顯示文件/目錄屬性 常見參數: -l :列出長數據串,包含文件的屬性與許可權數據等 -a :列出全部的文件,連同隱藏文件(開頭為.的文件)一起列出來(常用) -d :僅列出目錄本身,而不是列出目錄的文件數據 -h :將文件容量以較易讀的方式(GB,kB等)列出來 - ...
  • 1.date文件的備份 2.mysqldump 備份 說明:mysqldump是MySQL資料庫中的一個實用程式,它主要用於轉儲(備份)資料庫。mysqldump通過生成一個SQL腳本文件,包含從頭開始重新創建資料庫所必需的(如 CREATE TABLE和INSERT等),來實現資料庫的備份和轉儲。 ...
  • 1.分組 group by 詳情見,發佈的第七篇博客文章,7- MySQL函數 2.排序 order by 說明:在MySQL中,ORDER BY是一種用於對查詢結果進行排序的關鍵字。它可以根據一列或多列的值,以升序或降序的方式對查詢結果進行排序,使得查詢者可以更加方便 地查看、分析和處理數據。 使 ...
  • 1.分組group by 在MySQL中,GROUP BY的意思是“分組查詢”,它可以根據一個或多個欄位對查詢結果進行分組。 GROUP BY的作用是通過一定的規則將一個數據集劃分成若幹個小的區域,然後針對若幹個小區域進行數據處理。這可以理解為將數據按照某個欄位或者多個欄位進行分組。 使用GROUP ...
  • MySQL資料庫管理 資料庫-->數據表-->行(記錄):用來描述一個對象的信息 列(欄位):用來描述對象的一個屬性 常用的數據類型: int :整型 無符號[0,2^32-1],有符號[-2^31,2^31-1] float :單精度浮點 4位元組32位 double :雙精度浮點 8位元組64位 c ...
  • 在MySQL中,高級查詢是指使用更複雜的查詢語句和操作符來檢索和操作資料庫中的數據。高級查詢可以幫助您更精確地找到所需的信息,並提高查詢的效率和靈活性。 以下是高級查詢的一些常見應用場景和意義: 連接多個表:使用JOIN操作符將多個表連接起來,以便在一次查詢中獲取相關聯的數據。這對於在多個表之間建立 ...
  • 背景: 隨著項目體量越來越大,用戶群體越來越多,用戶的聲音也越來越明顯;關於應用發版之後用戶無感知,導致用戶用的是仍然還是老版本功能,除非用戶手動刷新,否則體驗不到最新的功能;這樣的體驗非常不好,於是我們團隊針對該問題給出了相應的解決方案來處理;技術棧:vue3+ts+vite+ant-design ...
  • 相比用戶停留時間短、用完即走的 Web 頁面,桌面 QQ 用戶在一次登錄後,可能會掛機一周以上,這段期間,如果沒有嚴格控制好 QQ 記憶體占用,那麼結果可能是用戶交互響應變慢、甚至 Crash。在系統監控工具里,高記憶體占用也會被直觀地反映出來,帶來不好的口碑。MAC QQ 灰度期間,也聽到了一些用戶關... ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...