欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS實現(xiàn)Logo陰影特效

  發(fā)布時間：2023-11-20 14:22:54   作者：OXXD   我要評論
這篇文章主要個大家介紹了如何使用CSS實現(xiàn)Logo陰影特效，文章通過代碼示例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可是自己動手嘗試一下

實現(xiàn)效果

在線演示

實現(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實現(xiàn)Logo陰影特效的詳細(xì)內(nèi)容，更多關(guān)于CSS實現(xiàn)Logo陰影特效的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • CSS文本陰影 text-shadow 懸停效果詳解

    這篇文章給大家介紹CSS 文本陰影 text-shadow 懸停效果，本文將專注于使用 CSS text-shadow 屬性來實現(xiàn)有趣的鼠標(biāo)懸停效果，但是實際上并不會為這些文本制作任何文本陰影效
    2022-05-23

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

    這篇文章主要介紹了CSS 實現(xiàn)多彩、智能的陰影效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-05-12

  • 使用純 CSS 實現(xiàn)滾動陰影效果

    這篇文章主要介紹了使用純 CSS 實現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-04

  • css文字陰影漸漸模糊效果的實現(xiàn)

    這篇文章主要介紹了css文字陰影漸漸模糊效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-12-07

  • CSS中使用文本陰影與元素陰影效果

    本文通過實例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2020-01-18

  • CSS 陰影動畫優(yōu)化技巧

    這篇文章主要介紹了CSS 陰影動畫優(yōu)化技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-10-31

  • CSS陰影效果的比較之drop-Shadow與box-Shadow

    這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小
    2019-05-23

  • 用CSS畫一個帶陰影的三角形的示例代碼

    這篇文章主要介紹了用CSS畫一個帶陰影的三角形的示例代碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨
    2019-07-31

  • css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果

    這篇文章主要介紹了css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-22

  • CSS 翹邊陰影的實現(xiàn)代碼

    這篇文章主要介紹了CSS 翹邊陰影的實現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-15

最新評論