花式圖像裝飾：輪廓和復雜動畫-css教學-PHP中文網

花式圖像裝飾：輪廓和復雜動畫

William Shakespeare

發布： 2025-03-10 10:41:10

原創

324 人瀏覽過

Fancy Image Decorations: Outlines and Complex Animations

在我們三部分的創意圖像裝飾系列中的這篇結論文章探討了高級CSS技術，特別是利用了典型的類似邊界的功能以外的典型屬性。以前的文章以梯度為重點；這是一個僅使用outline元素來實現複雜效果和動畫的深入研究。 <img alt="花式圖像裝飾：輪廓和復雜動畫" >>

掌握圖像裝飾：三部分系列

本文）>

>讓我們從懸停效果開始：疊加層在懸停的疊加中逐漸消失。我們沒有採用額外的HTML元素，而是利用

屬性具有負面偏移和重疊其元素的能力。 outline

>最初的大型半透明輪廓充當我們的覆蓋層。狀態修改了輪廓的大小和顏色，從而創建了一個平滑的動畫。此技術也可以產生褪色的效果，而不會大綱運動。

img {
  --s: 250px; /* image size */
  --b: 8px;   /* border thickness */
  --g: 14px;  /* gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009; /* large, semi-transparent outline */
  outline-offset: calc(var(--s) / -2); /* negative offset for overlay */
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c); /* smaller, colored outline on hover */
  outline-offset: var(--g); /* positive offset for hover effect */
}

登入後複製

為了伸縮性，與CSS蒙版結合了一個大的:hover（例如，），消除了對顯式圖像大小的需求。注意：野生動物園可能需要使用一半的圖像大小而不是

>。

>除了簡單的覆蓋層之外，我們可以使用outline-width>或CSS蒙版製作形狀，並結合輪廓技巧，以生成複雜的揭示動畫。可能性很大：可以實現星星，心臟和無數其他形式。此外，這些形狀很容易使用100vmax>的動畫功能和先前文章中詳細介紹的梯度技術進行動畫。 100vmax

>在此演示中某些動畫可能看起來有些不完美（需要優化生產使用），但它們展示了此方法的力量。一個替代示例利用CSS掩碼來獲得更平滑的效果。 >

> clip-path屬性為圖像增強功能提供了驚人的多功能性。將其添加到您的CSS武器庫中，以創建視覺上令人驚嘆和互動的圖像裝飾。 clip-path團結技術

探索了梯度，口罩，剪裁和輪廓，讓我們結合這些技術以展示它們的靈活性和模塊化。所顯示的令人印象深刻的效果僅在

元素中實現 - 不需要額外的divs或偽元素。