
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(rèn)領(lǐng)
文檔簡介
1、你所不知道的 css 負(fù)值技巧與細(xì)節(jié)寫本文的起因是,一天在群里有學(xué)生說誤打誤撞下,用法負(fù)的outline-offset實現(xiàn)了加號。嗯?奇怪的我馬上也動手嘗試了下,到底是如何用法負(fù)的outline-offset實現(xiàn)加號呢?用法負(fù)值outline-offset實現(xiàn)加號假設(shè)我們有這樣一個容易的結(jié)構(gòu):divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:10px;修改outline-offset到一個合適的負(fù)值,那么在恰當(dāng)?shù)臅r候,outline邊框就會向內(nèi)縮進為一個加號。經(jīng)過一番嘗試,修改上述div的outline-offset
2、為-118px。divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:-118px;加個動畫效果,也許是這樣:codependemo-用法outline實現(xiàn)加號很故意思,我嘗試了無數(shù)不同的狀況,最后總結(jié)了一個容易的邏輯,要用法負(fù)的outline-offset生成一個加號有一些容易的限制:容器得是個正方形outline邊框本身的寬度不能太小outline-offset負(fù)值x的取值范圍為:-(容器寬度的一半+outline寬度的一半)?以box-shadow:1px2px3px4px333為例,4個數(shù)值的含義分離是,x方向偏
3、移值、y方向偏移值、含糊半徑、擴張半徑。這里有一個小技巧,擴張半徑可以為負(fù)值。繼續(xù),假如陰影的含糊半徑,與負(fù)的擴張半徑全都,那么我們將看不到任何陰影,由于生成的陰影將被包含在本來的元素之下,除非給它設(shè)定一個方向的偏移量。所以這個時候,我們給定一個方向的偏移值,即可實現(xiàn)單側(cè)投影:codependemo-css單側(cè)投影用法scale(-1)實現(xiàn)翻轉(zhuǎn)通常,我們要實現(xiàn)一個元素的180°翻轉(zhuǎn),我們會用法transform:rotate(180deg),這里有個小技巧,用法transform:scale(-1)可以達到同樣的效果。看個demo:cssnagativescale(-1).sc
4、aletransform:scale(1);animation:scale10sinfinitelinear;keyframesscale50%transform:scale(-1);100%transform:scale(-1);看看效果:(gif中第一行是用法了transform:rotate(180deg)的效果)codependemo-用法scale(-1)實現(xiàn)元素的翻轉(zhuǎn)用法負(fù)letter-spacing倒序羅列文字與上面scale(-1)有異曲同工之妙的是負(fù)的letter-spacing。letter-spacing屬性明確了文字的間距行為,通常而言,除了關(guān)鍵字normal,我們還可
5、以指定一個大小,表示文字的間距。像這樣:倒序羅列文字.letter_spacingfont-size:36px;letter-spacing:0px;animation:move10sinfinite;keyframesmove40%letter-spacing:36px;80%letter-spacing:-72px;100%letter-spacing:-72px;我們設(shè)置文字的letter-spacing從0->36px->-72px,觀看不同的變幻:codependemo-負(fù)letter-spacing倒序羅列文字然而,受到中英文混排或者不同字體的影響,以及倒序后的羅列方式
6、,不建議用法這種方式來倒序羅列文字。transition-delay及animation-delay的負(fù)值用法,立即開頭動畫我們知道,css動畫及過渡提供了一個delay屬性,可以延遲動畫的舉行??紤]下面這個動畫:容易的代碼也許是這樣:.itemtransform:rotate(0)translate(-80px,0);.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite1slinear;.item:nth-child(3)animation:rotate3
7、sinfinite2slinear;keyframesrotate100%transform:rotate(360deg)translate(-80px,0);假如,我們想去掉這個延遲,希翼在一進入頁面的時候,3個球就是同時運動的。這個時候,只需要把正向的animation-delay改成負(fù)向的即可。.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite-1slinear;.item:nth-child(3)animation:rotate3sinfinite
8、-2slinear;這里,有個小技巧,被設(shè)置了animation-dealy為負(fù)值的動畫會立即執(zhí)行,開頭的位置是其動畫階段中的一個階段。所以,動畫在一開頭的時刻就是下面這樣:以上述動畫為例,一個被定義執(zhí)行3s的動畫,假如animation-delay為-1s,起點相當(dāng)于正常執(zhí)行時,第2s(3-1)時的位置。codependemo-用法負(fù)值animation-delay提前執(zhí)行動畫負(fù)值margin負(fù)值margin在css中算是運用的比較多的,元素的外邊距可以設(shè)置為負(fù)值。在flexbox布局規(guī)范還沒流行之前,實現(xiàn)多行等高布局還是需要下一番功夫的。其中一種辦法便是用法正padding負(fù)margin相
9、消的辦法。有如下一個布局:左右兩欄的內(nèi)容都是不確定的,也就是高度未知。但是希翼無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多,兩欄的高度始終保持全都。ok,其中一種hack方法便是用法一個很大的正padding和相同的負(fù)margin相消的辦法填充左右兩欄:.g-left.padding-bottom:9999px;margin-bottom:-9999px;.g-right.padding-bottom:9999px;margin-bottom:-9999px;可以做到無論左右兩欄高度如何變幻,高度較低的那一欄都會隨著另外一欄變幻。詳細(xì)的代碼可以看看這里:codependemo-正padding負(fù)margi
10、n實現(xiàn)多列等高布局總結(jié)一下另外,還有一些大家熟知的沒有單獨列出來的,譬如:用法負(fù)marign實現(xiàn)元素的水平垂直居中用法負(fù)marign躲藏列表li首尾多余的邊框用法負(fù)text-indent實現(xiàn)文字的躲藏用法負(fù)的z-index參加層疊上下文排序還有一些很淺顯的,譬如張鑫旭大大在今年的css大會上共享的,利用負(fù)的opacity在css中實現(xiàn)了偽條件推斷,協(xié)作css自定義屬性,用法純css實現(xiàn)360°的餅圖效果:第五屆css大會主題共享之css創(chuàng)意與視覺表現(xiàn)最后額,雖然css負(fù)值的一些用法場景確實有實用之處,但是與此同時有可能帶來的是代碼可讀性的下降。有的時候看到這些代碼不得不好好捋一捋才干緩過神來,再感嘆一句,本來如此。假如有其他
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 智慧農(nóng)業(yè)新質(zhì)生產(chǎn)力專題學(xué)習(xí)
- ktv安全管理制度范本
- 學(xué)校安全生產(chǎn)月活動簡報
- 施工吊籃安全使用規(guī)范
- 幼兒園食品安全健康教育活動方案及總結(jié)
- 生產(chǎn)安全事故應(yīng)急預(yù)案管理辦法培訓(xùn)
- 安全生產(chǎn)許可證的辦理條件
- 中國煤礦安全生產(chǎn)網(wǎng)官網(wǎng)
- 技術(shù)部安全生產(chǎn)責(zé)任制
- 學(xué)校安全生產(chǎn)工作方案
- 臺球助教勞務(wù)合同范本
- 瀘州老窖“濃香文釀杯”企業(yè)文化知識競賽考試題庫大全-下(多選、填空題)
- 招標(biāo)售后服務(wù)方案及服務(wù)承諾
- 歇后語大全500條
- 譯林版初中教材詞匯表(默寫版)
- 建筑用真空陶瓷微珠絕熱系統(tǒng)應(yīng)用技術(shù)規(guī)程
- 老年人夏季常見病預(yù)防
- HG-T 20583-2020 鋼制化工容器結(jié)構(gòu)設(shè)計規(guī)范
- 工作場所有害因素職業(yè)接觸限值-第2部分-物理因素
- 初高中語文銜接教學(xué)課件
- 望聞問切四診在中醫(yī)糖尿病診斷中的應(yīng)用
評論
0/150
提交評論