主頁(yè) > 知識(shí)庫(kù) > CSS 實(shí)現(xiàn)多彩、智能的陰影效果

CSS 實(shí)現(xiàn)多彩、智能的陰影效果

熱門(mén)標(biāo)簽:農(nóng)村住宅地圖標(biāo)注 ai電銷(xiāo)機(jī)器人連接網(wǎng)關(guān) 中紳電銷(xiāo)智能機(jī)器人 跟電銷(xiāo)機(jī)器人做同事 濟(jì)南辦理400電話 鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 鄭州電銷(xiāo)外呼系統(tǒng)違法嗎 漳州人工外呼系統(tǒng)排名 威海營(yíng)銷(xiāo)外呼系統(tǒng)招商

背景

有沒(méi)有想過(guò)如何創(chuàng)建從前景元素中繼承某些顏色的陰影效果?閱讀本文并找出如何實(shí)現(xiàn)方法吧!

前幾天我經(jīng)過(guò)家得寶(Home Depot,美國(guó)家得寶公司,全球領(lǐng)先的家居建材用品零售商),他們正在大規(guī)模展銷(xiāo)正在出售的智能燈 💡,其中一種是一系列燈泡位于電視機(jī)后面,它們會(huì)投射出與電視機(jī)前景屏幕上顯示的顏色相近的燈光,類似于以下圖片所示。

注意電視后面發(fā)生了什么。電視機(jī)屏幕前景中顯示的顏色被燈投影成彩色陰影背景。隨著屏幕上顏色的變化,背景投影顏色也發(fā)生變化。真的很酷,對(duì)吧?

看到這一點(diǎn)后,自然而然地我首先想到的是,能否使用 web 開(kāi)發(fā)技術(shù)創(chuàng)建一個(gè)五顏六色的,并且足夠聰明可以模擬前景顏色的陰影呢?事實(shí)證明,在只使用 CSS 的情況下,完全可以實(shí)現(xiàn)這種效果。在本文中,我們將研究如何實(shí)現(xiàn)。

開(kāi)干!

令其成真

在接下來(lái)的段落中你將會(huì)發(fā)現(xiàn),剛開(kāi)始時(shí),乍一看僅使用 CSS 來(lái)創(chuàng)建智能的彩色陰影似乎是一項(xiàng)艱巨的任務(wù),當(dāng)我們循序漸進(jìn),把困難部分拆分成更小的部分時(shí),你就會(huì)發(fā)現(xiàn)一切都會(huì)變得容易理解消化。在接下來(lái)的章節(jié)中,我們將創(chuàng)建一個(gè)如下所示的示例:

你看到的是一張壽司 🍣 的圖片,后面有與前景顏色相對(duì)應(yīng)的陰影。為了強(qiáng)調(diào)我們所做的是動(dòng)態(tài)的,給陰影增加了一個(gè)脈動(dòng)動(dòng)畫(huà)效果。通過(guò)這個(gè)有效的示例,讓我們深入探討如何僅在使用 HTMLCSS 的情況下讓一切變得生動(dòng)起來(lái)。

展示圖片

用于展示壽司 🍣HTML 如下所示并沒(méi)有什么特別:

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

我們有一個(gè)父級(jí) div 元素 .parent,它包含一個(gè)子級(jí)元素 .suchi 用于展示 🍣。我們通過(guò)使用一張背景圖片的形式來(lái)實(shí)例化 🍣,.sushi 元素的具體樣式規(guī)則如下:

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

在上面樣式規(guī)則中,我們將 div 設(shè)置為 150 * 150 寬高像素,并且設(shè)置了 background-image 及相關(guān)屬性,如果展示一下我們現(xiàn)在所實(shí)現(xiàn)的結(jié)果,可以看到如下圖所示的內(nèi)容。

創(chuàng)建陰影

現(xiàn)在我們已經(jīng)展示出了我們的壽司 🍣 圖片,剩下更加有趣的部分就是來(lái)定義陰影。我們將使用指定一個(gè)子偽元素 ::after 來(lái)定義陰影,它將做 3 件事情:

  • 直接位于圖片所在 div 的后面;
  • 繼承與父元素相同的背景圖像;
  • 通過(guò)濾鏡產(chǎn)生出多彩的 drop-shadow 陰影效果。

上述3個(gè)功能由以下2個(gè)樣式規(guī)則實(shí)現(xiàn):

.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;
}

花一點(diǎn)時(shí)間來(lái)瀏覽下這里的實(shí)現(xiàn),密切關(guān)注每個(gè)屬性和對(duì)應(yīng)值。最值得注意的是 background 屬性和 filter 屬性。 background 的值是 inherit,這意味著它將繼承父級(jí)元素的背景值:

background: inherit;

filter 屬性定義了兩個(gè)濾鏡值:drop-shadowblur

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

我們的 drop-shadow 濾鏡設(shè)置了一個(gè) 50% 透明度的黑色陰影。blur 濾鏡為為元素設(shè)置 20px 的模糊效果。這兩個(gè)濾鏡的結(jié)合最終就可以創(chuàng)造出多彩的陰影,當(dāng)這兩條樣式規(guī)則生效時(shí),我們就可以看到如下圖出現(xiàn)在壽司 🍣 圖像后面彩色的陰影:

到這一點(diǎn),我們已經(jīng)實(shí)現(xiàn)了很多。為了完整性,如果你想要多彩的陰影具有放大縮小的動(dòng)畫(huà)效果,以下額外的 CSS 可以幫你實(shí)現(xiàn):

.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);
  }
}

如果你想在不使用循環(huán)動(dòng)畫(huà)效果的情況下增強(qiáng)交互性,也可以使用 CSS transition 來(lái)改變陰影的行為,如在 hover 操作情況下。需要強(qiáng)調(diào)的難點(diǎn)是對(duì)待偽元素只需要像對(duì)待用 HTML 創(chuàng)建的或 JavaScript 動(dòng)態(tài)創(chuàng)建的元素一樣,唯一的不同是這個(gè)元素完全是僅使用 CSS 創(chuàng)建的!

結(jié)論

偽元素允許我們使用 CSS 來(lái)創(chuàng)建通常在 HTMLJavaScript 領(lǐng)域內(nèi)完成的元素創(chuàng)建任務(wù)。對(duì)于我們多彩的智能陰影來(lái)說(shuō),我們依賴于父元素有一個(gè)背景圖像集,這使得我們定義一個(gè)既可以繼承父級(jí)背景細(xì)節(jié)又可以設(shè)置模糊效果和投影效果的子元素變得容易。雖然這一切都很好,減少了我們大量的復(fù)制粘貼工作,但是這種方法也不是很靈活。

如果我想將這樣的陰影應(yīng)用到一個(gè)不只是帶有背景圖像的空元素上,該怎么辦呢?如果我有一個(gè) HTML 元素如一個(gè)按鈕或組合框,我想應(yīng)用這種陰影效果呢?一種解決方案是依靠 JavaScript 復(fù)制 DOM 中的相應(yīng)元素,將其放置在前臺(tái)元素底層,應(yīng)用過(guò)濾器,這樣也是一種方法。雖然這可以實(shí)現(xiàn)效果,但我想到這個(gè)有點(diǎn)重復(fù) DOM 元素的沉重過(guò)程就不寒而栗。更糟糕的是,JavaScript 沒(méi)有將你想提供的任意視覺(jué)意向轉(zhuǎn)換為渲染目標(biāo)位圖的能力!🥶

本文是翻譯,原文地址請(qǐng)瀏覽:https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
本文地址:https://www.cnblogs.com/dragonir/p/14758359.html 作者:dragonir

到此這篇關(guān)于CSS 實(shí)現(xiàn)多彩、智能的陰影的文章就介紹到這了,更多相關(guān)css實(shí)現(xiàn)陰影內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:咸陽(yáng) 甘南 萍鄉(xiāng) 蘇州 紅河 文山 營(yíng)口 惠州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS 實(shí)現(xiàn)多彩、智能的陰影效果》,本文關(guān)鍵詞  CSS,實(shí)現(xiàn),多彩,智能,的,陰影,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS 實(shí)現(xiàn)多彩、智能的陰影效果》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于CSS 實(shí)現(xiàn)多彩、智能的陰影效果的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章