日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

?

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

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

以下可能是你沒有使用過，但絕對有用的 10 個 CSS 功能！

1. 創(chuàng)建布局

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

解決方法：使用 columns 屬性。

columns: 300px auto;

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

2. 明暗模式之間切換

用戶喜歡暗模式，但手動為每個元素編寫樣式可能會花很長時間。

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

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

這會根據(jù)用戶的設(shè)備主題自動更改文本顏色。在暗模式下，文本變?yōu)榘咨诹聊Ｊ较?，文本變?yōu)楹谏：芎唵?，對吧?/span>

3. 懸停在多個項目上

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

解決方法：使用同級選擇器。

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

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

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

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

解決方法：使用 position: fixed。

position: fixed;

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

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

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

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

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

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

6. 為 SVG 文本添加動畫

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

解決方法：使用 stroke-dasharray。

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

這會使 SVG 文本的輪廓動起來，看起來就像是實時繪制的。效果很棒，而且做起來非常簡單！

7. 制作類似墨水的效果

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

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

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

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

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

構(gòu)建 3D 圖像滑塊聽起來很復(fù)雜，如果沒有 JavaScript 很難做到。

解決方法：使用 transform 和 rotateY。

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

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

9. 刪除圖像背景

您需要刪除圖像的背景，但這聽起來像是 Photoshop 的工作。

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

mix-blend-mode: darken;

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

10. 在 Sprite 中制作動畫步驟

問題：您有一個 Sprite（具有多個幀的單個圖像），并且想要輕松地為其制作動畫。

解決方法：使用步驟計時功能。

animation-timing-function: steps(10);

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

好了，10 個 CSS 單行代碼可以解決常見的設(shè)計問題！

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