使用CSS实现Logo阴影特效的代码

1

2

3

4

<figure>

  <section class="img-bg"></section>

  <img height="320" width="320" src="https://vitejs.dev/logo-with-shadow.png" alt="Vite Logo" />

</figure>

1

2

3

4

5

6

7

8

9

10

11

12

13

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

1

border-radius: 50%;

1

filter: blur(72px);

1

z-index: -1;

1

animation: pulse 4s cubic-bezier(0, 0, 0, 0.5) infinite;