使用CSS实现Logo阴影特效

  发布时间:2023-11-20 14:22:54   作者:OXXD   我要评论
这篇文章主要个大家介绍了如何使用CSS实现Logo阴影特效,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的同学可是自己动手尝试一下

实现效果

在线演示

实现

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. 将背景设置为圆形

  border-radius: 50%;

3. 加入关键的filter 属性将模糊的图形效果应用于元素

  filter: blur(72px);

4. 将背景至于图形底部

  z-index: -1;

5. 加入动画效果

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

参考链接

以上就是使用CSS实现Logo阴影特效的详细内容,更多关于CSS实现Logo阴影特效的资料请关注脚本之家其它相关文章!

相关文章

  • CSS文本阴影 text-shadow 悬停效果详解

    这篇文章给大家介绍CSS 文本阴影 text-shadow 悬停效果,本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上并不会为这些文本制作任何文本阴影效
    2022-05-23
  • CSS 实现多彩、智能的阴影效果

    这篇文章主要介绍了CSS 实现多彩、智能的阴影效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-05-12
  • 使用纯 CSS 实现滚动阴影效果

    这篇文章主要介绍了使用纯 CSS 实现滚动阴影效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-04
  • css文字阴影渐渐模糊效果的实现

    这篇文章主要介绍了css文字阴影渐渐模糊效果的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-07
  • CSS中使用文本阴影与元素阴影效果

    本文通过实例代码给大家介绍了CSS中使用文本阴影与元素阴影效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-01-18
  • CSS 阴影动画优化技巧

    这篇文章主要介绍了CSS 阴影动画优化技巧,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-31
  • CSS阴影效果的比较之drop-Shadow与box-Shadow

    这篇文章主要介绍了CSS阴影效果的比较之drop-Shadow与box-Shadow,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2019-05-23
  • 用CSS画一个带阴影的三角形的示例代码

    这篇文章主要介绍了用CSS画一个带阴影的三角形的示例代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
    2019-07-31
  • css实现动态阴影、蚀刻文本、渐变文本效果

    这篇文章主要介绍了css实现动态阴影、蚀刻文本、渐变文本效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-22
  • CSS 翘边阴影的实现代码

    这篇文章主要介绍了CSS 翘边阴影的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-15

最新评论