日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

?

CSS 是設(shè)計(jì)網(wǎng)站的工具之一。許多開(kāi)發(fā)人員只了解 CSS 的基礎(chǔ)知識(shí)，他們花了數(shù)小時(shí)才弄好布局，或者設(shè)計(jì)出總覺(jué)得缺少點(diǎn)什么的設(shè)計(jì)。

但有一些特殊功能和隱藏的精華可以為您節(jié)省數(shù)小時(shí)的工作時(shí)間，并顯著改善您的代碼，使其更加完美。

以下可能是你沒(méi)有使用過(guò)，但絕對(duì)有用的 10 個(gè) CSS 功能！

1. 創(chuàng)建布局

您是否曾嘗試過(guò)制作類(lèi)似 Pinterest 的布局，而有的項(xiàng)目具有不同的高度？網(wǎng)格和彈性框經(jīng)常會(huì)留下尷尬的間隙，看起來(lái)不太好看。

解決方法：使用 columns 屬性。

columns: 300px auto;

這會(huì)將您的內(nèi)容拆分為響應(yīng)式列。每列寬度至少為 300 像素，瀏覽器將根據(jù)屏幕尺寸決定適合多少列。沒(méi)有間隙，沒(méi)有壓力！

2. 明暗模式之間切換

用戶(hù)喜歡暗模式，但手動(dòng)為每個(gè)元素編寫(xiě)樣式可能會(huì)花很長(zhǎng)時(shí)間。

解決方法：讓明暗功能處理它。

color: light-dark(#000, #fff);

這會(huì)根據(jù)用戶(hù)的設(shè)備主題自動(dòng)更改文本顏色。在暗模式下，文本變?yōu)榘咨诹聊Ｊ较拢谋咀優(yōu)楹谏：芎?jiǎn)單，對(duì)吧？

3. 懸停在多個(gè)項(xiàng)目上

您希望懸停效果不僅改變您懸停的元素，還改變其鄰居。

解決方法：使用同級(jí)選擇器。

.item:hover ~ .item { transform: scale(1.1); }

當(dāng)您將鼠標(biāo)懸停在一個(gè) .item 上時(shí)，這將增加其右側(cè)所有項(xiàng)目的大小。如果您愿意，甚至可以調(diào)整左側(cè)項(xiàng)目的大小！

4. 修復(fù)圖層位置

調(diào)整屏幕大小時(shí)，具有多個(gè)重疊圖層的設(shè)計(jì)可能會(huì)變得混亂。元素四處移動(dòng)，一切看起來(lái)都不對(duì)勁。

解決方法：使用 position: fixed。

position: fixed;

無(wú)論屏幕大小如何，這都能讓您的元素保持固定位置。對(duì)于像 Parallax 或任何具有大量圖層的設(shè)計(jì)來(lái)說(shuō)，它非常方便。

5. 以 3D 形式旋轉(zhuǎn)對(duì)象

制作 3D 效果（如旋轉(zhuǎn)的汽水罐）通常需要 JavaScript 和大量工作。

解決方法：使用 CSS 旋轉(zhuǎn)。

transform: rotateY(var(--angle));

這會(huì)沿 Y 軸旋轉(zhuǎn)對(duì)象，使其看起來(lái)是 3D 的。更改 --angle 值，它就會(huì)旋轉(zhuǎn)！

6. 為 SVG 文本添加動(dòng)畫(huà)

您希望 SVG 文本看起來(lái)像是寫(xiě)出來(lái)的，但這似乎太復(fù)雜了。

解決方法：使用 stroke-dasharray。

stroke-dasharray: 100%; stroke-dashoffset: 0; animation: draw 2s linear;

這會(huì)使 SVG 文本的輪廓?jiǎng)悠饋?lái)，看起來(lái)就像是實(shí)時(shí)繪制的。效果很棒，而且做起來(lái)非常簡(jiǎn)單！

7. 制作類(lèi)似墨水的效果

您想創(chuàng)建一個(gè)看起來(lái)像潑灑的墨水或煙霧的酷炫效果，但僅使用 CSS 似乎無(wú)法實(shí)現(xiàn)。

解決方法：使用 mask-image 屬性。

mask-image: url('ink-mask.svg'); mask-size: cover;

這會(huì)將元素剪裁為蒙版圖像的形狀。要獲得墨水效果，只需使用墨水形狀的 SVG 或圖像作為蒙版即可。

8. 創(chuàng)建 3D 旋轉(zhuǎn)木馬

構(gòu)建 3D 圖像滑塊聽(tīng)起來(lái)很復(fù)雜，如果沒(méi)有 JavaScript 很難做到。

解決方法：使用 transform 和 rotateY。

transform: rotateY(calc(var(--index) * 90deg)) translateZ(500px);

這會(huì)將項(xiàng)目定位在 3D 空間中的圓圈內(nèi)。更改 --index 值會(huì)使每個(gè)項(xiàng)目圍繞圓圈旋轉(zhuǎn)。

9. 刪除圖像背景

您需要?jiǎng)h除圖像的背景，但這聽(tīng)起來(lái)像是 Photoshop 的工作。

解決方法：使用 mix-blend-mode。

mix-blend-mode: darken;

這會(huì)逐個(gè)像素地將圖像與其背景進(jìn)行比較，并移除較亮的區(qū)域，使較暗的部分可見(jiàn)。它并不適用于所有圖像，但對(duì)許多圖像來(lái)說(shuō)效果很好。

10. 在 Sprite 中制作動(dòng)畫(huà)步驟

問(wèn)題：您有一個(gè) Sprite（具有多個(gè)幀的單個(gè)圖像），并且想要輕松地為其制作動(dòng)畫(huà)。

解決方法：使用步驟計(jì)時(shí)功能。

animation-timing-function: steps(10);

這會(huì)將動(dòng)畫(huà)分成相等的部分，使其看起來(lái)像精靈逐幀移動(dòng)。非常適合創(chuàng)建跳躍或奔跑的動(dòng)畫(huà)！

好了，10 個(gè) CSS 單行代碼可以解決常見(jiàn)的設(shè)計(jì)問(wèn)題！

這些代碼片段可能很小，但功能卻非常強(qiáng)大。試試看，看看你的設(shè)計(jì)變得有多簡(jiǎn)單！