使用CSS實(shí)現(xiàn)Logo陰影特效
發(fā)布時(shí)間：2023-11-20 14:22:54 作者：OXXD 
我要評論
我要評論這篇文章主要個(gè)大家介紹了如何使用CSS實(shí)現(xiàn)Logo陰影特效，文章通過代碼示例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可是自己動手嘗試一下
實(shí)現(xiàn)效果
實(shí)現(xiàn)
HTML 元素：
<figure> <section class="img-bg"></section> <img height="320" width="320" src="https://vitejs.dev/logo-with-shadow.png" alt="Vite Logo" /> </figure>
CSS 樣式代碼：
.img-bg {
position: absolute;
background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
border-radius: 50%;
filter: blur(72px);
z-index: -1;
animation: pulse 4s cubic-bezier(0, 0, 0, 0.5) infinite;
}
@keyframes pulse {
50% {
transform: scale(1.5);
}
}1. 增加背景
background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
2. 將背景設(shè)置為圓形
border-radius: 50%;
3. 加入關(guān)鍵的filter 屬性將模糊的圖形效果應(yīng)用于元素
filter: blur(72px);
4. 將背景至于圖形底部
z-index: -1;
5. 加入動畫效果
animation: pulse 4s cubic-bezier(0, 0, 0, 0.5) infinite;
參考鏈接
以上就是使用CSS實(shí)現(xiàn)Logo陰影特效的詳細(xì)內(nèi)容，更多關(guān)于CSS實(shí)現(xiàn)Logo陰影特效的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章給大家介紹CSS 文本陰影 text-shadow 懸停效果，本文將專注于使用 CSS text-shadow 屬性來實(shí)現(xiàn)有趣的鼠標(biāo)懸停效果，但是實(shí)際上并不會為這些文本制作任何文本陰影效2022-05-23
這篇文章主要介紹了CSS 實(shí)現(xiàn)多彩、智能的陰影效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-05-12
這篇文章主要介紹了使用純 CSS 實(shí)現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-04- 這篇文章主要介紹了css文字陰影漸漸模糊效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-07
本文通過實(shí)例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-18
這篇文章主要介紹了CSS 陰影動畫優(yōu)化技巧,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-31
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-05-23
這篇文章主要介紹了用CSS畫一個(gè)帶陰影的三角形的示例代碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨2019-07-31
css實(shí)現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果
這篇文章主要介紹了css實(shí)現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-22
這篇文章主要介紹了CSS 翹邊陰影的實(shí)現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-15
