首頁 > 文章 > web前端 > 詳解純CSS實現多彩、智慧陰影的方法

詳解純CSS實現多彩、智慧陰影的方法

青灯夜游轉載: 2021-05-12 10:23:001784瀏覽

本篇文章為大家詳細介紹一下純CSS實現多彩、智慧陰影的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

詳解純CSS實現多彩、智慧陰影的方法

有沒有想過如何建立從前景元素繼承某些顏色的陰影效果？閱讀本文並找出如何實現方法吧！

前幾天我經過家得寶（Home Depot，美國家得寶公司，全球領先的家居建材用品零售商），他們正在大規模展銷正在出售的智能燈，其中一種是一系列燈泡位於電視機後面，它們會投射出與電視機前景螢幕上顯示的顏色相近的燈光，類似於以下圖片所示。

詳解純CSS實現多彩、智慧陰影的方法

注意電視後面發生了什麼事。電視螢幕前景中顯示的顏色被燈投影成彩色陰影背景。隨著螢幕上顏色的變化，背景投影顏色也改變。真的很酷，對吧？

看到這一點後，自然而然地我首先想到的是，能否使用 web 開發技術創建一個五顏六色的，並且足夠聰明可以模擬前景顏色的陰影呢？事實證明，在只使用 CSS 的情況下，完全可以實現這種效果。在本文中，我們將研究如何實現。【學習影片分享：css影片教學】

開幹！

令其成真

在接下來的段落中你將會發現，剛開始時，乍一看僅使用CSS 來創建智能的彩色陰影似乎是一項艱鉅的任務，當我們循序漸進，把困難部分拆分成更小的部分時，你會發現一切都會變得容易理解消化。在接下來的章節中，我們將創建一個如下所示的範例：

詳解純CSS實現多彩、智慧陰影的方法

你看到的是一張壽司的圖片，後面有與前景顏色相對應的陰影。為了強調我們所做的是動態的，為陰影增加了一個脈動動畫效果。透過這個有效的範例，讓我們深入探討如何僅在使用 HTML 和 CSS 的情況下讓一切變得生動起來。

展示圖片

用來展示壽司的HTML 如下所示並沒有什麼特別：

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

我們有一個父級div 元素.parent，它包含一個子層級元素.suchi 用於展示。我們透過使用一張背景圖片的形式來實例化，.sushi 元素的具體樣式規則如下：

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

在上面樣式規則中，我們將div設定為150 * 150 寬高像素，並且設定了background-image 及相關屬性，如果展示我們現在所實現的結果，可以看到如下圖所示的內容。

詳解純CSS實現多彩、智慧陰影的方法

創建陰影

現在我們已經展示了我們的壽司圖片，剩下更有趣的部分就是來定義陰影。我們將使用指定一個子偽元素::after 來定義陰影，它將做3 零件事情：

直接位於圖片所在 div 的後面；
繼承與父元素相同的背景圖像；
通濾鏡產生出多彩的drop-shadow 陰影效果。

上述3個功能由以下2個樣式規則實現：

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

花一點時間來瀏覽下這裡的實現，密切注意每個屬性和對應值。最值得注意的是 background 屬性和 filter 屬性。 background 的值是inherit，這表示它將繼承父級元素的背景值：

background: inherit;

filter 屬性定義了兩個濾鏡值：drop-shadow 和blur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

我們的drop-shadow 濾鏡設定了一個50% 透明度的黑色陰影。 blur 濾鏡為為元素設定 20px 的模糊效果。這兩個濾鏡的結合最終可以創造出多彩的陰影，當這兩個樣式規則生效時，我們就可以看到如下圖出現在壽司圖像後面彩色的陰影：

詳解純CSS實現多彩、智慧陰影的方法

到這一點，我們已經實現了很多。為了完整性，如果你想要多彩的陰影具有放大縮小的動畫效果，以下額外的 CSS 可以幫你實現：

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

如果你想在不使用循环动画效果的情况下增强交互性，也可以使用 CSS transition 来改变阴影的行为，如在 hover 操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML 创建的或 JavaScript 动态创建的元素一样，唯一的不同是这个元素完全是仅使用 CSS 创建的！

结论

伪元素允许我们使用 CSS 来创建通常在 HTML 和 JavaScript 领域内完成的元素创建任务。对于我们多彩的智能阴影来说，我们依赖于父元素有一个背景图像集，这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好，减少了我们大量的复制粘贴工作，但是这种方法也不是很灵活。

如果我想将这样的阴影应用到一个不只是带有背景图像的空元素上，该怎么办呢？如果我有一个 HTML 元素如一个按钮或组合框，我想应用这种阴影效果呢？一种解决方案是依靠 JavaScript 复制 DOM 中的相应元素，将其放置在前台元素底层，应用过滤器，这样也是一种方法。虽然这可以实现效果，但我想到这个有点重复 DOM 元素的沉重过程就不寒而栗。更糟糕的是，JavaScript 没有将你想提供的任意视觉意向转换为渲染目标位图的能力！

更多编程相关知识，请访问：编程视频！！

以上是詳解純CSS實現多彩、智慧陰影的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html Filter 循环继承 dom 伪元素 background transition

陳述：

本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：css bfc是什麼意思下一篇：css bfc是什麼意思

看更多