广告位联系
返回顶部
分享到

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

css 来源:互联网 作者:佚名 发布时间:2023-11-28 22:18:00 人浏览
摘要

在线演示 实现 HTML 元素: 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 CSS样式代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 .img-bg { position:

在线演示

实现

HTML 元素:

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>

CSS 样式代码:

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. 增加背景

1

background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);

2. 将背景设置为圆形

1

border-radius: 50%;

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

1

filter: blur(72px);

4. 将背景至于图形底部

1

z-index: -1;

5. 加入动画效果

1

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 使用纯CSS实现动态渐变文本特效

    使用纯CSS实现动态渐变文本特效
    如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。 基于以上动图效果可
  • 使用CSS实现Logo阴影特效的代码

    使用CSS实现Logo阴影特效的代码
    在线演示 实现 HTML 元素: 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 CSS样式代
  • CSS3几种实现子容器水平垂直居中的方法介绍

    CSS3几种实现子容器水平垂直居中的方法介绍
    子容器 Flexbox 布局 1 2 3 div style=display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px; div1/div /div 在上述代码中我们
  • css中flexbox和grid的区别小结

    css中flexbox和grid的区别小结
    我们是不是被那些不会按预期排列的元素所影响?这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异,我们会发现这
  • 使用CSS实现多行文本展开收起效果
    在文章阅读、持续段落、多行文本等场景中经常会遇到有展开收起的需求操作,今天使用CSS实现一下具体的实现流程。 二、实现思路 实现多
  • 纯CSS实现炫酷文本时钟特效的代码

    纯CSS实现炫酷文本时钟特效的代码
    如图所示这是一个纯本文时钟效果,和传统的时钟不一样,没有表盘,也没有完整到每一分钟的数字表示当前时刻。 在这个时钟中,当前时
  • 新CSS Math方法中rem()和mod()的使用
    rem() 函数的基础知识 余数的数学概念来自除法,表示一个数不能平均除以另一个数时的余数。例如,在9 4中,9不是4的倍数,因此4不能平均
  • CSS实现空心尖角的代码介绍

    CSS实现空心尖角的代码介绍
    我记得之前刷面试题的时候,CSS面试题里面赫然有一题是如何用CSS实现三角形,我觉得这个问题确实很经典,我上的前端培训班当初就讲过
  • CSS取消移动端长按元素背景色的方法介绍

    CSS取消移动端长按元素背景色的方法介绍
    在开发微信小程序的时候,发现有的元素长按之后,出现了讨厌人的背景色,这就很奇怪,就想把它去掉,所以这里教一下方法: 在所在元
  • CSS文字溢出:ellipsis在IE上不起效果的解决
    单行文本的溢出显示省略号 1 2 3 4 5 p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本的溢出显示省略号 方法一: 1 2 3 4 5 6 7
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计