純CSS如何實(shí)現(xiàn)多彩、智能陰影
這篇文章給大家分享的是有關(guān)純CSS如何實(shí)現(xiàn)多彩、智能陰影的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是一家專業(yè)提供谷城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為谷城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
前幾天我經(jīng)過家得寶（Home Depot，美國家得寶公司，全球領(lǐng)先的家居建材用品零售商），他們正在大規(guī)模展銷正在出售的智能燈，其中一種是一系列燈泡位于電視機(jī)后面，它們會(huì)投射出與電視機(jī)前景屏幕上顯示的顏色相近的燈光，類似于以下圖片所示。
注意電視后面發(fā)生了什么。電視機(jī)屏幕前景中顯示的顏色被燈投影成彩色陰影背景。隨著屏幕上顏色的變化，背景投影顏色也發(fā)生變化。真的很酷，對(duì)吧？
看到這一點(diǎn)后，自然而然地我首先想到的是，能否使用 web 開發(fā)技術(shù)創(chuàng)建一個(gè)五顏六色的，并且足夠聰明可以模擬前景顏色的陰影呢？事實(shí)證明，在只使用 CSS 的情況下，完全可以實(shí)現(xiàn)這種效果。在本文中，我們將研究如何實(shí)現(xiàn)?！緦W(xué)習(xí)視頻分享：css視頻教程】
開干！
令其成真
在接下來的段落中你將會(huì)發(fā)現(xiàn)，剛開始時(shí)，乍一看僅使用 CSS 來創(chuàng)建智能的彩色陰影似乎是一項(xiàng)艱巨的任務(wù)，當(dāng)我們循序漸進(jìn)，把困難部分拆分成更小的部分時(shí)，你就會(huì)發(fā)現(xiàn)一切都會(huì)變得容易理解消化。在接下來的章節(jié)中，我們將創(chuàng)建一個(gè)如下所示的示例：
你看到的是一張壽司的圖片，后面有與前景顏色相對(duì)應(yīng)的陰影。為了強(qiáng)調(diào)我們所做的是動(dòng)態(tài)的，給陰影增加了一個(gè)脈動(dòng)動(dòng)畫效果。通過這個(gè)有效的示例，讓我們深入探討如何僅在使用 HTML 和 CSS 的情況下讓一切變得生動(dòng)起來。
展示圖片
用于展示壽司的 HTML 如下所示并沒有什么特別：
我們有一個(gè)父級(jí) div 元素 .parent，它包含一個(gè)子級(jí)元素 .suchi 用于展示。我們通過使用一張背景圖片的形式來實(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)展示出了我們的壽司圖片，剩下更加有趣的部分就是來定義陰影。我們將使用指定一個(gè)子偽元素 ::after 來定義陰影，它將做 3 件事情：
上述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í)間來瀏覽下這里的實(shí)現(xiàn)，密切關(guān)注每個(gè)屬性和對(duì)應(yīng)值。最值得注意的是 background 屬性和 filter 屬性。 background 的值是 inherit，這意味著它將繼承父級(jí)元素的背景值：
background: inherit;
filter 屬性定義了兩個(gè)濾鏡值：drop-shadow 和 blur
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)畫效果，以下額外的 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)畫效果的情況下增強(qiáng)交互性，也可以使用 CSS transition 來改變陰影的行為，如在 hover 操作情況下。需要強(qiáng)調(diào)的難點(diǎn)是對(duì)待偽元素只需要像對(duì)待用 HTML 創(chuàng)建的或 JavaScript 動(dòng)態(tài)創(chuàng)建的元素一樣，唯一的不同是這個(gè)元素完全是僅使用 CSS 創(chuàng)建的！
感謝各位的閱讀！關(guān)于“純CSS如何實(shí)現(xiàn)多彩、智能陰影”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
文章題目：純CSS如何實(shí)現(xiàn)多彩、智能陰影
當(dāng)前網(wǎng)址：
http://weahome.cn/article/pcgeoo.html
重慶分公司
重慶分公司
